動的に作成された部分ビューのKnockoutJS

Question

私はノックアウトリストの境界にある動的な部分ビューを使用している問題で戦っています。

問題は、ノックアウトリストのviewmodelが、適切なマナーの新しく作成された動的ビューにバインドされていないことです。

などです。 最初の人のコントロール：ユーザー「マーク」のための

検索、KOアレイは

別の人のコントロールを追加移入されます。ユーザーのための

検索を「ピート」を、何も新しいコントロールに示していないが、初期 人グリッドが更新され、結果が表示されます。

私はコンポーネント登録がどのように機能するのかを研究していますが、現時点でこれと戦っています。以下

http://knockoutjs.com/documentation/component-registration.html

コードです：

形式：

<div id="peopleDiv"> 
    @Html.Partial("_reconperson", @Model.ReconPerson) 
</div> 

<button id="addPerson">Add person</button> 

<script id="personSearchTemplate" type="text/html"> 
    <tr> 
     <td><label data-bind="text: EmployeeFirstName"></label></td> 
    </tr> 
</script> 

<script> 
    $('#addPerson').on('click', function (evt) { 
     evt.preventDefault(); 
     evt.stopPropagation(); 

     var div = $('#peopleDiv'); 
     var url = '@Url.Action("AddNewPerson")';  
     $.get(url, function (data) { 
      div.append(data); 
     }); 
    }); 
</script> 

私はpartialviewを返します私のコントローラの上に座ってのActionResultを持っています。

public ActionResult AddNewPerson() 
{ 
return PartialView("_reconperson", CreateReconPerson()); 
} 

部分図：

@model ReconPerson 

@{ 
     var personSearchTxt = "personSearch" + @Model.ControlId; 
     var personSearchDiv = "personSearch" + @Model.ControlId + "Div"; 
} 

<input type="text" id="@personSearchTxt" /> 
<table id="@personSearchDiv"> 
<thead> 
    <tr> 
    <th> 
    <label>First Name</label> 
    </th>     
    </tr> 
    </thead> 
    <tbody data-bind="template: { name: 'personSearchTemplate', foreach: people }"></tbody> 
</table> 


<script defer="defer"> 
    $('#@personSearchTxt').keyup(function() { 
     updateGrid('@personSearchTxt', true, "", "@personEmpId"); 
    }); 
</script> 

knockoutjs結合情報

var defaultColumns = {  
    EmployeeFirstName: "" 
}; 

var viewModel = { 
    people: ko.observableArray([defaultColumns]) 
}; 

ko.applyBindings(viewModel); 

アップデート人observableArray：

function updateGrid(searchBoxName) { 

    viewModel.people.removeAll(); 
    var fullname = $('#' + searchBoxName).val(); 

    request = $.ajax({ 
     url: searchemployeeUrl + fullname, 
     failure: function (error) { console.log(error); }, 
     success: function (data) { 
      for (var i = 0; i < data.length; i++) { 
       viewModel.people.push(data[i]); 
      } 
     } 
    }); 

Answer 1

こんにちは、私はばかげていました。

私はすべてのコンポーネントを部分ビューに移動し、ビューモデルをdiv要素にバインドし、ブームソートしました。

@{ var peopleModel = "peopleModel" + @Model.ControlId;} 
var viewModel = { 
      @peopleModel: ko.observableArray([defaultColumns]) 
     }; 

     ko.applyBindings(viewModel, document.getElementById("@personGroupDiv"));