ノックアウト - オブジェクトとビューの配列、そうですか？

Question

私は、各オブジェクトがビュービューのデータを表すオブジェクトの配列を持っています。 1つの関数からオブジェクトに簡単に追加できるように、各オブジェクトのプロパティのセットを開始したいと思います。私がこれをやっているやり方はそうです。

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を持っているしかし、私は正しくこれらのオブジェクトをインスタンス化していないのですか？オブジェクト上でデバッガを一時停止すると、observable .viewPropertiesがすべて表示されますが、DOMに行くとすぐに、それが何であるかがわかりません。何が問題になっていますか？

Answer 1

このようにすれば、コードはエラーなく動作するはずです。 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>

Answer 2

あなたはnewキーワードでcreateViewPropertiesを呼び出しているので、あなたのコードが動作しない理由があります。 JavaScriptのメソッド呼び出しの前にnewを使用すると、thisのコンテキストが現在の関数に設定され、その関数から暗黙的にthisが返されます。電話番号createViewPropertiesからnewを削除してください。すべて動作するはずです。

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

EDIT

別の方法としては、このようなnewを使用することができます。それまであなたが一緒にそれをすべて行ってきた方法次に、新しい

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

を。慣習は、newキーワードで呼び出されるメソッド名の場合、JavaScriptで大文字を使用することに注意してください。 「コンストラクタ」メソッドの名前は、通常、オブジェクト指向言語のように名詞でもあります。だから、より良い何かがあなたの代わりにやっているように匿名のオブジェクトを返すと間違って何もない、と述べた

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

だろう。