2

ノックアウト.jsでは、バインディングの右側(バインディングの値)を動的にすることはできますか? 例えば、

<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>

その結果dynamicBinding、バインディングの適用中に関数が実行され、結果の文字列がバインディングとして使用されます。foo().bar入力要素は、値が「hi」のオブザーバブルであるにバインドする必要があります。

なぜこれが必要なのか疑問に思われる場合は、行と列の両方が observableArrays であるノックアウトを使用して動的テーブルをレンダリングしようとしており、列定義にその列のバインディングの式を含めることができるようにしたいと考えています。つまり、私はこれを行うことができるようにしたい:

<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>

例からわかるように、列定義はデータから値を抽出する方法を知っています。表のマークアップ自体は、多かれ少なかれプレースホルダーです。しかし、私が知る限り、ノックアウトがバインディングを処理する方法が原因で、これは機能しません。他に利用可能なオプションはありますか?

ありがとう。

解決策: Ilya の提案を使用することになりました - cellValueBinding を、行と列を引数として受け取り、オブザーバブルを返す関数にすることができます。この手法は、このフィドルで実証されています。

4

1 に答える 1

2

それに使用ko.computedします。
例
JSFiddle
EDITを見てください 2番目の例では、関数に値
を渡すことができます$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

于 2012-12-12T21:12:21.150 に答える