foreach内でのノックアウトデータのバインディングtextarea

Question

foreach内では、私はspanタグとtextareaを持っています。スパンタグをクリックするたびに、テキストエリアの表示を切り替えたいと思います。

これは部分的に機能します。これは、私が現在使用している特定の項目のテキストエリアではなく、のforeach内のテキストエリアの表示を切り替えます。

ここに私のコードです。コードは実際には実行されませんが、私はあなたが何をしようとしているのかを十分に確認できます。

function MyViewModel(data) { 
 
var self = this; 
 
self.checkListItems = [1,2,3]; 
 
self.textAreaVisible = ko.observable(false); 
 
    
 
self.toggleTextArea = function() { 
 
     self.textAreaVisible(!self.textAreaVisible()); 
 
} 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<div data-bind="foreach: MyViewModel.checkListItems"> 
 
     <span data-bind="click: toggleTextArea">Add Comments ></span> 
 
     <textarea data-bind="value: comments, visible: textAreaVisible"></textarea> 
 
</div>

私は多分、私が何とか$データを使用する必要がありますように聞こえるれhttp://knockoutjs.com/documentation/foreach-binding.htmlここで、このリンクを見つけましたが、私は、このコンテキストで動作するように取得するかどうかはわかりません。

お手数ですがお寄せいただきありがとうございます。

Answer 1

あなたのチェックリストの項目は、より多くの本（つまり、オブジェクト）のようになります。

self.checkListItems = [ 
    { value: 1, visible: ko.observable(false) }, 
    { value: 2, visible: ko.observable(false) }, 
    { value: 3, visible: ko.observable(false) }, 
]; 

がやって、これはあなたがこのように反復することができます：

<div data-bind="foreach: MyViewModel.checkListItems"> 
     <span data-bind="click: function(){ visible(!visible()) }">Add Comments ></span> 
     <textarea data-bind="value: value, visible: visible"></textarea> 
</div> 

あなたはクリーンアップにクリックハンドラをしたいなら、あなたを次のようにあなたのビューモデルを変更できます：

function MyViewModel(data) { 
//rest of the code 

self.toggleTextArea = function (item) { 
    item.visible(!item.visible()); 
} 
} 

domを次のように変更します。

<div data-bind="foreach: MyViewModel.checkListItems"> 
      <span data-bind="click: $parent.toggleTextArea">Add Comments ></span> 
      <textarea data-bind="value: value, visible: visible"></textarea> 
    </div> 

Answer 2

textAreaVisibleの値は、ルートビューモデルのプロパティであるため、アレイ上のすべてのアイテムで同じなので、問題は意図したとおりです。

独自のオブザーバブルが必要な別のビューモデルが必要です。そのため、それぞれのビューモデルにko.observableArrayのビューモデルがあり、それぞれにコントロールフローのオブザーバビリティがあります。

Answer 3

これはあなたのやり方です。隠して表示するブール値は配列内に配置し、各オブジェクトに表示または非表示のブール値を持たせる必要があります。

function checkListItemViewModel(number) { 
 
    var self = this; 
 
    self.item = ko.observable(number); 
 
    self.comments = ko.observable(""); 
 
    self.isVisible = ko.observable(false); 
 
    self.toggleTextArea = function() { 
 
    self.isVisible(!self.isVisible()); 
 
    } 
 
} 
 

 
function MyViewModel(data) { 
 
    var self = this; 
 
    self.checkListItems = ko.observableArray(); 
 
    for (var i = 0; i<data.length; i++) { 
 
    self.checkListItems.push(new checkListItemViewModel(data[i])); 
 
    } 
 
} 
 
ko.applyBindings(new MyViewModel([1, 2, 3]));

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

 
<div data-bind="foreach: checkListItems"> 
 
    <button data-bind="click: toggleTextArea">Add Comments ></button> 
 
    <textarea data-bind="value: comments, visible: isVisible"> 
 
    </textarea> 
 
    <span data-bind="text: comments"></span><br/> 
 
</div>

Answer 4

あなたのtextareaモデルのコンストラクタを作ることができます。そして、視認性のための自己完結型の変数を持って、視認性

function TextAreaModel(text){ 
    var self = {}; 
    self.comments = ko.observable(text); 
    self.visible = ko.observable(false); 
    self.toggleVisible = function(){ 
    self.visible(!self.visible()); 
    }; 
    return self; 
} 

function MyViewModel() { 
    var self = {}; 
    self.checkListItems = [ 
     TextAreaModel("This is some text"), 
     TextAreaModel("This is some more text") 
    ]; 
    return self; 
} 

var vm = MyViewModel(); 
ko.applyBindings(vm); 

の作業例トグル： https://jsfiddle.net/8n6pghuo/