0

ノックアウト.jsを使用しています。testViewModel観測可能なプロパティが1つだけのビューモデルを作成しましたtestProperty。

function testViewModel()
{
  var self = this;

  self.testProperty = ko.observable("Initial");

}

spanの変更した値testPropertyが反映される と、値をinput text field変更できる を作成しましたtestProperty。

 <span data-bind="text: testProperty"></span><br />
 <input type="text" data-bind="value: testProperty" />

Example Fiddleを作成しました。入力テキスト フィールドに対して focusout イベントが実行されると、observable プロパティの値が更新されるようです。

ここで私の質問は、監視可能なプロパティ値の更新イベントを focusout から別のものに変更できないかということです。保存ボタンも作りました。保存ボタンを押したときにのみ監視可能なプロパティ値を更新する方法はありますか。

ユーザーがプロファイルを作成および保存し、保存したプロファイルを編集できるアプリケーションを作成しようとしています。フォームの作成と編集で同じ観察可能なプロパティを使用していますが、これらのプロパティは観察可能です。したがって、ユーザーがプロファイルを編集するとき、ユーザーが保存ボタンを押すまで UI は更新されません。これが私の目標です。この問題を解決するのを手伝ってください。

4

3 に答える 3

2

もう 1 つの手段は、Matt Burland が提案したのと同じ行に沿ったものです。

http://jsfiddle.net/mori57/PQxJC/

基本的に、入力とボタンをフォームにラップし、フォームを送信にバインドします。これは、ViewModel のメソッドによって処理されます。私がインラインで行ったコメントを参照してください。ただし、ここでは jsFiddle に出かけたくない人向けです。

<span data-bind="text: testProperty"></span><br />
<!-- wrap the input and button in a form and
   data-bind to submit, with a reference
   to a handler on your viewmodel -->
<form data-bind="submit: updateProfile">
<!-- this must be bound to your shadow value -->
<input type="text" data-bind="value: _tmpTestProperty" />
<button type="submit">save</button>
</form>​

そしてあなたのJavaScriptで

function testViewModel()
{
  var self = this;

  self.testProperty = ko.observable("Initial");
  // Create the "shadow" property
  // and prepopulate it with testProperty's value
  self._tmpTestProperty = ko.observable(self.testProperty());

  // Create our form handler
  self.updateProfile = function(val){
    // set the testProperty value to the 
    // value of the shadow property
    self.testProperty(self._tmpTestProperty());
  };

}

ko.applyBindings(new testViewModel());​

このように、テキスト入力ボックスからフォーカスを失っても値は変更されませんが、フォームを送信したときにのみ更新されます。

于 2012-10-19T15:49:11.927 に答える
1

最も簡単な方法は、プロパティごとにシャドウプロパティを設定することです。したがって、1 つをテキスト ボックスにバインドし、保存がクリックされたときに、値を他の UI 要素にバインドされた他のプロパティにのみコピーします。

ここを参照してください: http://jsbin.com/aguyud/5/edit

2 つのモデルと $.extend を使用して一方から他方にコピーする簡単な方法:

http://jsbin.com/aguyud/7/edit

更新して、実際にそれをスクラッチしますが、うまくいかないようです。代わりにこれを試しました：

http://jsbin.com/aguyud/22/edit

これは初めて機能しますが、モデルを $.extend でコピーした後、すべてのバインディングもコピーされたように見えるため、一度しか機能しません!

于 2012-10-19T15:13:23.140 に答える