淘汰賽 - 對象和視圖的數組，正確的方式？

我有一個對象數組，其中每個對象代表一個視圖視圖的數據。我想爲每個對象啓動一組屬性，以便我可以輕鬆地從一個函數添加到對象上。我這樣做的方式就是這樣。淘汰賽 - 對象和視圖的數組，正確的方式？

var createViewProperties = function() { 
     return { 
      rightContentVisibility: ko.observable(true) // normally false, true for testing 
     }; 
    }; 

var data= [ 
    { 
    headline: "Are you interested in helping others?", 
    viewProperties: new createViewProperties(), 
    }, 
    { 
    headline: "This is a second modal view", 
    viewProperties: new createViewProperties(), 
    } 
];

然後我找到合適的對象，我想要顯示和更新視圖模型的對象。在HTML中，我像這樣繪製視圖。

<div data-bind="with: currentView"> 
    <div data-bind="css: $data.headline" class="cover-img"></div> 
    <div data-bind="$data.viewProperties.rightContentVisibility"></div> 
</div>

但是瀏覽器的.rightContentVisibility爲undefined，我沒有正確實例化這些對象嗎？當我在對象上暫停調試器時，它看起來有整個可觀察的.viewProperties，但是一旦它進入dom，它不知道它是什麼，這裏出了什麼問題？

來源

2016-07-14 William Howley

如果你這樣做，那麼代碼應該沒有任何錯誤的工作。檢查你的ko.applyBindings()電話 - 也許你有一個錯誤。

var createViewProperties = function() { 
 
     return { 
 
      rightContentVisibility: ko.observable(true) // normally false, true for testing 
 
     }; 
 
    }; 
 

 
var data = [ 
 
    { 
 
    headline: "Are you interested in helping others?", 
 
    viewProperties: new createViewProperties(), 
 
    }, 
 
    { 
 
    headline: "This is a second modal view", 
 
    viewProperties: new createViewProperties(), 
 
    } 
 
]; 
 

 
ko.applyBindings({ currentView: data });

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div data-bind="with: currentView"> 
 
    <div data-bind="css: $data.headline" class="cover-img"></div> 
 
    <div data-bind="$data.viewProperties.rightContentVisibility"></div> 
 
</div>

來源

2016-07-14 14:36:48

你的代碼是不工作的原因是因爲你與new關鍵字調用createViewProperties。在JavaScript中的方法調用之前使用new將this的上下文設置爲當前函數，並從該函數隱式返回this。從您的電話中刪除new到createViewProperties，一切都應該起作用。

var data = [ 
{ 
    headline: "Are you interested in helping others?", 
    viewProperties: createViewProperties(), 
}, 
{ 
    headline: "This is a second modal view", 
    viewProperties: createViewProperties(), 
} 
];

編輯

或者您可以使用new這樣的：

var createViewProperties = function() { 
     this.rightContentVisibility = ko.observable(true);  
};

然後新的它，你一直在做這一切的方式。請注意，約定是在JavaScript中使用大寫字符，用於使用new關鍵字調用的方法名稱。「構造函數」方法的名稱通常也是面嚮對象語言中的名詞。所以，更好的東西會

var ViewProperties = function() { /* etc etc */ };

這就是說，有什麼不妥就像你正在做的，而不是返回一個匿名對象。

來源

2016-07-14 15:41:17

淘汰賽 - 對象和視圖的數組，正確的方式？

回答

相關問題