Knockout.js-如何設置可觀察對象作為參考？

Question

我設置了一個可觀察的對象，但是它總是返回“ undefined”。 解釋起來並不容易，所以我將展示我想做的事情。

在底部檢查更新-它包含一個重現該問題的小提琴（ jsfiddle.net/4uRj5/9 ）。

結構

我有一個具有以下結構的主viewmodel：

function PurchasePlanViewModel() {

    var main = this;

    // Global Data

    var data = new function () {

        var data = this;

        data.PlanId = ko.observable();

        data.Monitors = ko.observable();
        data.Commands = ko.observable();
        data.HistoryDays = ko.observable();

        // ...

    };

    // SubViewModels

    main.SubscriptionForm = new function () {

        var o = this;

        o.SelectPlan = new function () {

            var oo = this;

            // Data

            oo.PlanId = data.PlanId;

            // ...

            // Methods

            oo.ChoosePlan = function (selectedplan) { // do something ... };

            oo.CustomizePlan = function () {

                // do something ...

                data.PlanId(0);

            };

            // ...

        };
    };
};

稱為“數據”的結構表示該頁面處理的所有數據，我將其定義為全局私有對象，因此它不能直接在HTML綁定中使用，但可以用作子視圖模型的引用。

每個數據只能通過各自的子視圖模型進行綁定，因此，每個子視圖模型都需要在本地定義引用全局數據的數據。

一切正常，綁定運行良好，所有對象都同步，即使不同子視圖模型共有的對象也是如此。

問題

就像我說的那樣，一切正常，直到用戶選擇“自定義計划”時需要手動將PlanId設置為0。

在oo.CustomizePlan內部，我將data.PlanId設置為0 ...但它不起作用。 當我嘗試獲取data.PlanId值時，它返回未定義。

我進行了一些測試，發現oo.PlanId = data.PlanId是導致此不良行為的原因。

問題

如何在此結構中設置data.PlanId？ 我想念的是什么？

我真的很想保留此結構（僅私有數據結構）。

更新 我用上面的代碼創建了一個FIDDLE 。 單擊創建自定義計划時，data.PlanId（0）無法正常工作。

希望有人可以幫助我！ 謝謝！

Answer 1

我認為您的做法是正確的：

oo.PlanId = data.PlanId;

在您自己的模型中創建對私有data.observable的引用。 在“ CustomizePlan”中，您可以設置oo.PlanId或data.PlanId來更改二者的值。

在為Stack Overflow上的帖子創建示例代碼時，也許您已經解決了這個問題？ 看這個小提琴，對我有用：

http://jsfiddle.net/FMGd6/1/

好的，所以我還要指出另一件事：當您通過值綁定綁定到select時，您的observable將受到對select選項中值的約束。 如淘汰文件中所述：

但是，如果將模型值設置為列表中沒有相應條目的值，會發生什么？ Knockout的默認行為是覆蓋模型值，以將其重置為下拉菜單中已選擇的值，從而防止模型和UI失去同步。

http://knockoutjs.com/documentation/value-binding.html

您只能設置“ 1”，“ 2”和“ 3”（注意：它們與1,2,3不同，因為它們是整數）

Answer 2

我認為這里的問題是孤立的范圍。 我能夠解決問題，您可以在此JSFiddle中找到它。

我試圖保留您的數據結構，但是我認為我們不需要在您的子視圖模型中復制數據屬性。 在您的示例中， 數據僅具有一個屬性（PlanId）。 在這種情況下，我看不到主要問題。 但是，隨着數據屬性的增長，在子模型中復制它們所涉及的復雜性也隨之增長。

結果，我將子模型數據設置為可觀察到的全局數據，並且一切正常。 而且，以我的觀點，這是有道理的。

您的視圖模型如下所示：

main.SubscriptionForm = new function () {

    var o = this;

    o.SelectPlan = new function () {

        var oo = this;

        // Data is an observable 
        oo.data = ko.observable(data);

        // ...

        // Methods
        oo.CustomizePlan = function () {
            // do something ...
            alert(oo.data().PlanId());
            oo.data().PlanId(0);
            alert(oo.data().PlanId());
        };
        // ...
    };
};

您的模板如下所示：

<div data-bind="with: SelectPlan">
    <select data-bind="value: data().PlanId">
        <option value="0">Choose a Plan...</option>
        <option value="1">Plano 01</option>
        <option value="2">Plano 02</option>
        <option value="3">Plano 03</option>
    </select>
    <button data-bind="click: CustomizePlan">Create a Custom Plan</button>
</div>

Answer 3

實際上，我發現了確切的問題。 您的默認選項是字符串。

<option>Choose a Plan...</option>

在下一個選項中，您將它們視為整數

<option value="1">Plano 01</option>

然后您也將它們更新為整數...

 data.PlanId(0);

修復1：

將您的默認值更新為0

<option value="0">Choose a Plan...</option>

修復2：

當您手動更新PlanId時，將它們作為常規字符串處理。

data.PlanId("1");

我創建了另一個解決Fix 1的 JSFiddle 。