javascript - JsViews 中的数据绑定(bind)

标签 javascript jquery jsrender jsviews

我有一个 Javascript 对象文字,例如

test : {
  length: 3,
  text: "Please enter 3 characters"
 }

我想让文本根据长度动态呈现,就像这样

test : {
      length: 3,
      text: "Please enter {{:length}} characters"
     }

有什么方法可以在 JsViews 中实现这一点吗?我看了https://github.com/BorisMoore/jsviews/issues/327 ,但我不确定同样的方法是否适用于我的场景。

最佳答案

你可以尝试制作这样的辅助格式

html

<div id="result"></div>

<script id="tmpl" type="text/x-jsrender">
  <input type="text" data-link="length"/>
  <br/>
  <span> {^{:~format(text, length)}} </span>
</script>

js

var data = {
    length : 3,
    text : "Please enter {0} characters",
}

var _rxMark = /\{(\d+)\}/g;
var helpers = {
    format : function (string) {
        var data = [];
        for (var _i = 1; _i < arguments.length; _i++) {
            data[_i - 1] = arguments[_i];
        }
        return string.replace(_rxMark, function (substring, argIndex) {
            var result = data[parseInt(argIndex)];
            return result || "";
        });
    }
}

var tmpl = $.templates("#tmpl");

tmpl.link("#result", data, helpers);

参见example .

这里可能对您也有用 sample .

关于javascript - JsViews 中的数据绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39385637/

相关文章:

javascript - 使用模态 Bootstrap 在 Fullcalendar 中编辑事件

javascript - 使用 HTML 标签中的 JS 变量在 Javascript 中动态创建 HTML

javascript - jsRender 和 jsViews 之间的区别

javascript - 如何重置/删除 vuex 存储数据?

javascript - Next.JS "Link"vs "router.push()"vs "a"标签

jquery - 如何创建一个标题栏,其中一些文本在左侧,一些在右侧?

javascript - 查找具有特定字符串的 id

javascript - 制作一个新的div可拖动,尝试了一切

javascript - 如何将 d3.js 与 JSRender 结合使用?

javascript - 如何在 JsViews 数据链接方法中访问父数据