1

私は次のビューモデルを持っています:

var ViewModel = function(setData, dummyCard) {
    var self = this;
    ko.mapping.fromJS(setData, {}, self);

    self.cardCount = ko.computed(function() {
        //debugger;
        return self.cards().length;
    });

    self.editing = ko.observable(false);

    self.edit = function () {
        debugger;
        self.editing(true);
    };

};

このviewModelは、セットに属するカードのリストを表示するために使用されます。次の方法で、ユーザーがこれらのカードの面を編集できるようにしようとしています (両方の面を同時に)。

<!-- ko foreach: cards -->
      <!-- ko foreach: sides -->
         <div data-bind="visible: !$root.editing()" class="span5 side-study-box">
             <p data-bind="text: content">SIDE 1</p>
         </div>
      <!-- /ko -->
<!-- /ko -->

ここの例ごとに編集機能を追加しました (Bert Bertington の hasFocus の例を参照してください): http://knockoutjs.com/documentation/hasfocus-binding.html

ただし、Edit プロパティは $parent (Card) オブジェクトではなく $root (Set) オブジェクトに関連付けられているため、これはうまく機能しません。これを機能させるには、次のように「作成」メソッドが必要だと思います:ノックアウト JS マッピング プラグインを使用して作成されたビュー モデルにプロパティを追加する

これらのプロパティを側の親に持ち込むには、どのような構文が必要ですか?

編集：これまでのところ：

var ViewModel = function(setData, dummyCard) {
    var self = this;

    var cardModel = function(data) {
        debugger;
        ko.mapping.fromJS(data, {}, this);

        this.editing = ko.observable(false);

        this.editing = function() {
            debugger;
            this.editing(true);
        };
    };

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

self.cardCount = ko.computed(function() {
        //debugger;
        return self.cards().length;
    });

ただし、残りの js ではうまく機能しません。現在、「cards()」は未定義です。今掘り下げていますが、誰かヒントがあれば、私はすべて耳にします！

4

1 に答える 1

0

「cardModel」を定義し、このモデル内で KO マッピングを呼び出しましたが、KO バインディングを適用すると、デフォルトでは関数本体 (つまり、モデル定義) が実行されません。また、コードは「cardModel」に「cards」をマップするため、「cards」配列はルート モデル ビューでは使用できません。これらが一緒になって、カードが定義されていないことがわかる理由です。

「編集」プロパティの問題にも気付きました。終わりのない再帰を引き起こす「編集」という同じ名前のオブザーバブルと関数があるようです。

あなたが与えた説明で、あなたがcards要素を含むJSON配列をマップしようとしていると仮定し、あなたがやりたいことを成し遂げる1つの方法を定義しました。コードはこの fiddleにあります。

フィドルのコードは、読者の便宜のために以下に記載されています

JavaScript

var cardsJSON = {
    "cards" : [{
        "cardName" : "Card1",
        "sides" : ["Side1", "Side2"]
    }, {
        "cardName" : "Card2",
        "sides" : ["Side1", "Side2"]
    }, {
        "cardName" : "Card3",
        "sides" : ["Side1", "Side2"]
    }]
};

function ViewModel() {
    var self = this;

    var testFcn = function() {
        alert("In Function");
    };

    self.cards = ko.observableArray([]);
    self.cardCount = ko.computed(function() {
        return self.cards().length;
    });
};

function Card() {
    var self = this;
    self.editing = ko.observable(false);

    self.edit = function() {
        self.editing(true);
    };

    self.doneEdit = function() {
        self.editing(false);
    };
};

function createCard(data) {
    var card = new Card();
    ko.mapping.fromJS(data, {}, card);

    return card;
};

var viewModel = new ViewModel();
function init() {
    var mapping = {
        "cards" : {
            create : function(options) {
                return createCard(options.data);
            }
        }
    };

    ko.mapping.fromJS(cardsJSON, mapping, viewModel);
};

init();
ko.applyBindings(viewModel);

HTML

<table border="1">
    <thead>
        <tr>
            <th>Card</th>
            <th colspan="2">Sides</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <!-- ko foreach: cards -->
        <tr>
            <td data-bind="text: cardName"></td>
            <!-- ko foreach: sides -->
            <td>
                <span  data-bind="text: $data, visible: !$parent.editing(), click: $parent.edit"></span>
                <input data-bind="value: $data, visible:$parent.editing"></input>
            </td>
            <!-- /ko -->
            <td><input value="Done" type="button" data-bind="click: doneEdit"></input></td>
        </tr>
        <!-- /ko -->
    </tbody>
</table>

コードは必要以上に複雑かもしれませんが、より適切に説明する目的には役立ちます。

ご覧のとおり、「編集」、「編集」などの独自のプロパティを含むカードを表す別のビュー モデルがあります。マッピング プラグインを介して JSON をマップすると、カードの作成方法がオーバーライドされます。基本的に行うことは、カード ビュー モデルを作成し、マッピングを適用して、定義済みのプロパティと JSON のプロパティの両方が含まれるようにすることです。

これは明示的に行う必要があります（私の理解によると）。マッピングが完了すると、ルート ビュー モデルには監視可能なカードの配列が含まれ、各カード インスタンスには、データ バインディングで使用できる独自の「編集」機能と「編集」プロパティが含まれます。

お役に立てれば。

于 2013-03-26T04:36:48.780 に答える