0

ko.mappingで作成されたモデルのリストに要素を追加するための標準的な方法を見つけようとしています。私はjsFiddleをいじくり回すために作成しました：

javascriptは、次のようなものです。

var mapping, baseModel, view_model;

mapping = {
    outer: [{
        alpha: '',
        beta: [
            {
            carotine: '',
            blockers: ''}
        ]
    }]
};

baseModel = { // add in functionality
    append_outer: function() {
        this.outer.push({});
    },
    append_beta: function(xyz) {
        this.beta.push({});
    }
};

view_model = ko.mapping.fromJS(mapping, {}, baseModel);

ko.applyBindings(view_model, $("#mapped")[0]);​

対応するHTMLはjsFiddleにあります。

私が使用するとき、私append_outerはview_modelに追加された新しい要素が最初の要素と本質的に同一であり、すべてがオブザーバブルであると期待します。私が使用するときappend_beta、ベータ版には。を含む新しい要素があると思います[carotine: ko.observable(), blockers: ko.observable]。これを行うための明白な方法は見たことがありませんが、非常に一般的なユースケースになると思います。

明らかな理由で、サンプルコードは私が望むことをしていません！もちろん、それは私が何か明白なもの、例えばko.mappingCreate、またはそのようなものを見つけることを期待していじくり回していたものです。残念ながら、そのような運はありません。

データモデルが動的であることに言及している可能性がありますが、リストには常に、ピアのデータ表現と同じデータ表現を持つアイテムが含まれます。ビューモデル（mapping）の作成に使用されたデータはプロトタイプであると言えます。

どんな考えや方向性もありがたいです。

4

2 に答える 2

1

このようにするわけではありません...しかし、マッピングの側面をテンプレートとして取る型のオブジェクトを作成します。

http://jsfiddle.net/keith_nicholas/EEE6J/

一般に、オブジェクトを使用して構造を定義し、json をデータに使用するだけです。

于 2012-06-27T01:29:49.157 に答える
0

キースの提案に基づいて、私は次のことを行いました。

var mapping, baseModel, view_model;

mapping = {
    outer: [{
        alpha: '',
        beta: [
            {
            carotine: '',
            blockers: '',
            skittles: ''}
        ]}
    ]
};

baseModel = function(mapping) { // add in functionality
    var self = this;

    this._vm_prototype = mapping;

    console.log("Prototype: " + ko.mapping.toJSON(this._vm_prototype));

    self.append = function(target, proto_getter) {
        console.log("pg: " + proto_getter);
        var prototype = proto_getter(self._vm_prototype);

        console.log("Prototype: " + JSON.stringify(prototype));
        console.log("Target: " + ko.mapping.toJSON(target));

        this[target].push(ko.mapping.fromJS(prototype));
    };
};

view_model = ko.mapping.fromJS(mapping, {}, new baseModel(mapping));

ko.applyBindings(view_model, $("#mapped")[0]);​

残念ながら、これにはHTML側でのハックが必要です。たとえば、新しいbetaものを追加するには、プロトタイプのどこに存在するかを特定する必要があります。

<button data-bind='click: $root.append.bind($data, "beta", 
        function (proto) { return proto.outer[0].beta[0]; })'>
  Add another beta
</button>

とのためにouter

<button data-bind='click: append.bind($data, "outer", 
        function (proto) { return proto.outer[0]; })'>
 Add another outer
</button>

関数の代わりにappend渡されただけで関数をよりクリーンにすることができますがouter[0].beta[0]、その場合は解析するか、evalこれを行う必要があります。

jsFiddle AとBからわかるように、変更されるのは、だけですmappingが、機能は両方で期待どおりに機能します。

繰り返しますが、私はコードの重複を避けようとしていますが、これは醜いです。これをクリーンアップする方法についての考えがあればいいのですが！

于 2012-06-27T13:54:43.693 に答える