0

これが期待どおりに機能するようになるのに非常に近いです。JSON リクエストからデータを取得し、マッピング プラグインを使用してマッピングしています。クリック バインディングで、ネストされた配列に新しい値を追加したいと考えています。

現在、私のコードでは、addPoint が定義されていないというエラーが発生しています。

意見：

<table>
    <tbody data-bind='template: {name: "statRowTemplate", foreach: stats }'></tbody>
</table>

<script id="statRowTemplate" type="text/html">
    {{if type() != "column"}}
    <tr>
            <td><label>Name: </label><input data-bind="value: name" /></td>
            <td>
                    <label>Plot Points: </label><ul class="list-plot-points" data-bind="template: {name: 'dataTemplate' , foreach: data}"></ul>
                    <button data-bind="click: addPoint">Add Point</button>
                </td>

    </tr>
    {{/if}}
</script>
<script type="text/html" id="dataTemplate">         
<li>
        <input data-bind="value: val" />
</li>
</script>

<button data-bind="click: saveChanges">Save Changes</button>

モデルを見る

var viewModel = {};

$.getJSON('data-forecast-accuracy.json', function(result) {

    function mappedData(data) {
        this.val = data;
    }

    //override toJSON to turn it back into a single val
    mappedData.prototype.toJSON = function() {
       return parseInt(ko.utils.unwrapObservable(this.val), 10);  //parseInt if you want or not 
    };

    var mapping = {
        'data': {
            create: function(options) {
            return new mappedData(options.data)
            }
        }
    }

    viewModel.stats = ko.mapping.fromJS(result, mapping);

    viewModel.addPoint = function() {
    this.stats.data.push(new mappedData(0));
    }

    viewModel.saveChanges = function() {

        var unmapped = ko.mapping.toJSON(viewModel.stats);
        //console.log(unmapped);
        $.post('save-changes.php', {data: unmapped})
        .success(function(results) { console.log("success")})
        .error(function() {  console.log("error"); })
        .complete(function() {  console.log("complete"); });
    }

    ko.applyBindings(viewModel);
});

JSON:

[{"type":"spline","marker":{"symbol":"diamond"},"name":"Cumulative","data":[10,17,18,18,16,17,18,19]},{"type":"spline","marker":{"symbol":"circle"},"name":"Monthly","data":[10,22,20,19,8,20,25,23]}]

この jsfiddle を以前の応答から調整して、単一の配列にポイントを追加することができました。生成されたマッピング全体でこれを実装する方法を見つける必要があります。

http://jsfiddle.net/vv2Wx/1/

4

2 に答える 2

1

「addPoint が定義されていません」というエラーが発生する理由は、ビュー モデルの子プロパティのテンプレート内にいるためです。テンプレート内では、バインディング コンテキストは、ビュー モデルではなく stat オブジェクトです。

結論: Knockout は、存在しない stat.addPoint 関数を探しているため、エラーが発生します。

おそらくやりたいことは、親バインディング コンテキスト、ビュー モデルを参照することです。KO 1.3 ベータ版では、次のように親バインディング コンテキストにアクセスできます。

<button data-bind="click: $.parent.addPoint">Add Point</button>

親バインディング コンテキストへのアクセスを提供しない古いバージョンの Knockout に行き詰まっている場合は、ビュー モデルをグローバルにアクセス可能にするなど、いくつかの追加オプションがあり、その完全修飾名にバインドするだけです。 .

于 2011-09-30T19:59:42.870 に答える
1

addPointコンテキストに対してバインドしているところはstats、ビューモデルではなくアイテムです。

グローバル スコープがある場合viewModelは、次のことができますclick: viewModel.addPoint。thisメソッドで正しく設定されていることを確認する必要がありますaddPoint。最も簡単な方法は、次のようにメソッドを viewModel 変数にバインドすることです。

viewModel.addPoint = function() {
    this.stats.data.push(new mappedData(0));
}.bind(viewModel);

viewModelグローバル スコープがない場合は、 templateOptionsを介して渡すことができます。これは次のようになります。 

<tbody data-bind='template: {name: "statRowTemplate", 
                             foreach: stats, templateOptions: { add: addPoints } }'></tbody>

次に、次のように呼び出します。<button data-bind="click: $item.add">Add Point</button>

最後に、 KO 1.3 betaを使用している場合は、次のことができます。<button data-bind="click: $root.addPoint">Add Point</button>

于 2011-09-30T20:00:58.090 に答える