是否有可能讓knockoutjs更新'initialdata'對象？

下面是我想要與knockoutjs做一個更簡化的示例：是否有可能讓knockoutjs更新'initialdata'對象？

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>test</title> 
     <script type="text/javascript" src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script> 
     <script type="text/javascript"> 

      var derp = { "foo": 1, "bar": 2 }; 

      window.onload = function() { go(); } 

      function go() 
      { 
       var ViewModel = function(foobar) 
       { 
        this.foo = ko.observable(foobar.foo); 
        this.bar = ko.observable(foobar.bar); 
       } 

       ko.applyBindings(new ViewModel(derp)); 
      } 

     </script> 
    </head> 
    <body> 
     <input data-bind="value: foo"/> 
     <input data-bind="value: bar"/> 
     <button onclick="go();">Go</button> 
    </body> 
</html>

這段代碼的目的是讓knockoutjs在derp更新的值，而不是視圖模型的內部副本。

有沒有辦法用淘汰賽輕鬆完成這件事，還是我吠叫錯了樹？

編輯上下文：

這是從一個更大的應用程序撲殺。我的意圖是使用敲除來顯示和編輯一個大的，毛茸茸的JavaScript對象的屬性。這些對象由用戶動態實例化，並可以隨意切換。

在我發現找到挖空之前，我手動創建了DOM元素來顯示和編輯每個對象，這些對象很麻煩和繁瑣。我有一些在C＃中通過WPF使用MVVM的經驗，並且更願意使用這種方法。我對knockout最初的理解是，它會這樣做，沒有意識到ViewModel複製了ko.observable *所捕獲的值。 ViewModel對我來說仍然有用，因爲它允許我有條件地公開和簡化對想要編輯的成員的訪問。

來源

2012-02-08 luke

我只是好奇你爲什麼要嘗試使用knockoutjs而不想使用模型。我的意思是你可以使用普通的javascript來修改原始的derp ob，但我不認爲我完全理解你爲什麼要努力解決ko.js.也許我需要更多關於你正在努力完成的事情。 – Etch 2012-02-08 19:45:57

當然，我會編輯問題以添加一些上下文。 – luke 2012-02-08 19:47:21

我喜歡@Etch響應與Save方法。這有很大幫助。但是，如果你想自動化這樣的事情，那麼我會去subscribe觀察。

也許這不是一個更乾淨的方式來做到這一點。如果我能夠通過引用傳遞變量，會更加開心。

我更喜歡使用一些包裝器觀測少打字：

var returnFireObservable = function(variable, property) { 
    var obs = ko.observable(variable[property]); 
    obs.subscribe(function(newValue) { 
     variable[property] = newValue; 
    }); 
    return obs; 
};

而且在代碼中使用這種方式：

var ViewModel = function(foobar) { 
    this.foo = returnFireObservable (foobar, "foo"); 
    this.bar = returnFireObservable (foobar, "bar"); 
}; 

ko.applyBindings(new ViewModel(derp));

小演示http://jsfiddle.net/AlfeG/eQ9Zf/2/

希望這有助於。

來源

2012-02-08 22:28:17 AlfeG

確實有幫助。這看起來像一個很好的妥協，因爲它看起來像我試圖讓淘汰賽做一些它不是爲了設計。 – luke 2012-02-09 01:26:57

爲另一個好的選擇加價。 – Etch 2012-02-09 02:53:07

我不是100％確定我完全理解你想要什麼，但我會採取一些措施。

您已經定義了你的模型像這樣：

var ViewModel = function(foobar) 
      { 
       this.foo = ko.observable(foobar.foo); 
       this.bar = ko.observable(foobar.bar); 
      }

你var derp = { "foo": 1, "bar": 2 };又名lotsmorecomplicatedobject初始化你的淘汰賽模式。

因此，由於data-bind標籤，您的輸入將獲得這些值。然後修改這些輸入值，然後點擊保存按鈕並想更新原始的JavaScript對象。

如果這是我的偏向這樣的話......

您的視圖模型改成這樣：

var ViewModel = function(foobar) 
       { 

        this.foo = ko.observable(foobar.foo); 
        this.bar = ko.observable(foobar.bar); 
        save: function() { derp.foo = this.foo; 
             derp.bar = this.bar;   
         // ko.utils.postJson(location.href, { obj1: this.foo, obj2: this.bar }); 
        } 
       }

然後你的按鈕單擊事件更改爲：ViewModel.save();

我加postJson對象作爲示例，因爲這是我處理該類型數據的方式。我看着你傳遞給初始ViewModel定義的變量就是這樣..這裏是我的數據，我想從這一點預先填充我的viewmodel，然後我將ViewModel用於一切。一旦你採取了這種心態，你就不需要更新原始對象。

來源

2012-02-08 20:20:45 Etch

我對誤導性術語「初始數據」表示歉意;在敲除的例子中使用了術語，我認爲這有助於澄清事情。我同意初始化一個'ViewModel'並且永不回頭是要走的路，但我真正的「初始數據」是一個由不同的庫生成的複雜的JavaScript對象。該項目的其他部分依賴於它，所以我不能輕易放棄它。 – luke 2012-02-09 01:18:41

我不知道，我認爲最初的數據正是Knockoutjs對待它的原因，以及爲什麼他們的網站上的術語是如此。如果JavaScript必須持久化，只需使用save方法將viewmodel值保留到原始對象。我認爲@AlfeG有另一個好的選擇。 – Etch 2012-02-09 02:53:33

是否有可能讓knockoutjs更新'initialdata'對象？

回答

相關問題