0

永続化にはバックボーンを使用し、バインドにはノックアウトを使用しています。つまり、ページの読み込み時にノックバックを使用しています。すべて問題ありません。チェックボックスをクリックすると、IsChecked の値に基づいて、yes または no が表示されます。

モデルのリセット ボタンをクリックすると、以前に見られた動作が失われます。つまり、「はい」が表示されているときにリセットをクリックすると、チェック ボックスの状態に関係なく「いいえ」は表示されません。

可視バインディングを使用すると機能しますが、ユーザーの基準に応じてフォーム要素をレンダリングするかどうかを決定できるように、この「if」を機能させる必要があります。

どんな助けでも大歓迎です。ありがとう。

ここに私のサンプルコードがあります:

<script type="text/javascript">

var model_a;
var collection_ac;

var example_new_model_a;

$(document).ready(function () {
    model_a = Backbone.Model.extend({
        idAttribute: 'A_Pid',
        defaults: {
            A_Pid: null,
            ChildName: "",
            IsChecked: false,
            Show: false,
        },
    });

    example_new_model_a = new model_a();
    example_new_model_a.set('ChildName', 'child of test');

    vm = kb.viewModel(example_new_model_a);

    ko.applyBindings(vm, $('#div1')[0]);
});

var vm;

function reset_model() {
    kb.utils.release(vm);
    vm = null;

    example_new_model_a = new model_a();
    example_new_model_a.set('ChildName', 'child of test2');

    vm = kb.viewModel(example_new_model_a);
    ko.applyBindings(vm, $('#div1')[0]);
}

function show_div() {
    example_new_model_a.set('Show', true);
}


<div id="div1">
<div data-bind="visible: Show">
Check or Uncheck <input type="checkbox" data-bind="checked: IsChecked" />
<!-- ko if:IsChecked -->
<p>yes</p>
<!-- /ko -->
<!-- ko if:!IsChecked() -->
<p>no</p>
<!-- /ko -->
    <button data-bind="click: reset_model">Reset</button>
</div>
<button data-bind="click: show_div">Show</button>

編集

次のコードを追加すると、リセットを押した後でも機能することがわかりました。オブザーバブルから自動的にトリガーせずにビューを強制的に更新する方法を読んだ後? およびKnockout.js Templates Foreach - force complete re-render、ifでテンプレートを試してみましたが、うまくいきました。値を呼び出す方法がノックバック ビュー モデルから変更されているかどうかわからないため、より良い方法がない限り、この回避策を使用します。

<div data-bind="template: { name: 'test-template-1', if:IsChecked}"></div>
<script type="text/html" id="test-template-1">
  <p>yes2</p>
</script>

<div data-bind="template: { name: 'test-template-2', if:!IsChecked()}"></div>
<script type="text/html" id="test-template-2">
  <p>no2</p>
</script>
4

1 に答える 1

0

私があなたの質問を誤解していないことを願っています: mementoを使用して、モデルを以前の状態にリセットします。

新しいビューをロードするとき: model.store() を使用してスナップショットを作成します。ページを離れるとき、またはリセットするときは、model.restore() を呼び出します。

于 2012-10-24T16:23:24.603 に答える