javascript - 在knockout.js中,是否可以使用动态绑定(bind)值?

标签 javascript knockout.js knockout-2.0

在knockout.js中,是否可以让绑定(bind)的右侧(绑定(bind)的值)是动态的?例如,

<input data-bind="value: dynamicBinding()"/>
<script type="text/javascript">
var vm = {
   dynamicBinding : function() {
       return "foo().bar";
   },
   foo : ko.observable({
       bar : ko.observable("hi");
   }
};
ko.applyBindings(vm);
</script>

结果应该是在应用绑定(bind)时执行dynamicBinding函数,并将生成的字符串用作绑定(bind)。输入元素应绑定(bind)到 foo().bar,它是值为“hi”的可观察值。

如果你想知道为什么我想要这个,我正在尝试渲染一个带有 knockout 的动态表,其中行和列都是 observableArrays,并且我希望允许列定义包含该绑定(bind)的表达式柱子。也就是说,我希望能够做到这一点:

<table data-bind="foreach: data">
  <tr data-bind="foreach: $root.columns">
    <td data-bind="text: cellValueBinding()"></td>
  </tr>
</table>
<script type="text/javascript">
var vm = {
   data: ko.mapping.fromJS([
     {title: "Brave New World", author: { name : "Aldous Huxley" },
     {title: "1984", author: { name : "George Orwell" },
     {title: "Pale Fire", author: { name : "Vladimir Nabokov" }]),
   columns: ko.observableArray([
     {header: "Title", cellValueBinding: function () { return "$parent.title"; }}, 
     {header: "Author", cellValueBinding: function () { return "$parent.author().name"; }}
   ])
};
ko.applyBindings(vm);
</script>

从示例中可以看出,列定义知道如何从数据中提取值。表标记本身或多或少是一个占位符。但据我所知,由于 knockout 处理绑定(bind)的方式,这不起作用。还有其他选择吗?

谢谢。


解决方案:我最终使用了 Ilya 的建议 - 我可以让 cellValueBinding 成为一个接受行和列作为参数并返回一个可观察值的函数。演示了该技术in this fiddle.

最佳答案

使用ko.compulated来实现它。
看例子
JSFiddle
编辑
在第二个示例中,您可以将 $parent 值传递给函数

<td data-bind="text: cellValueBinding($parent)"></td>  

在模型中

{header: "Title", cellValueBinding: function (parent) { return parent.title; }},
{header: "Author", cellValueBinding: function (parent) { return parent.author().name; }}

JSFiddle

关于javascript - 在knockout.js中,是否可以使用动态绑定(bind)值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13848486/

相关文章:

javascript - 分离 AngularJs Controller 代码的最佳方法

javascript - 使用 SammyJS 和 requireJS 来路由模块

javascript - 如何使用knockoutjs从字符串生成表单和文本?

javascript - 延迟异步计算可观察

javascript - 在拖放元素上滚动在 IE9 中创建行

knockout.js - 从现有的 html 页面中提取组件到外部文件

javascript - knockout JS : Fileupload event

jquery-ui - 将 jquery dragdrop 添加到 knockout

javascript - knockout 延长器或绑定(bind)?

javascript - jQuery Mobile Multiselect 不更新所选属性