KnockoutJS動態創建的局部視圖

我與我正在使用動態局部視圖界限到一個挖空列表的問題作鬥爭。KnockoutJS動態創建的局部視圖

問題是，淘汰列表的視圖模型未綁定到適當莊園中新創建的動態視圖。例如

。初始人控制：

搜索用戶的「標誌」，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>

我有一個ActionResult的坐在我的控制器上，將返回一個partialview。

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]); 
      } 
     } 
    });

來源

2017-08-17 Mark Myburgh

嗨，原來我一直很傻。

我剛將所有組件移到局部視圖中，然後將視圖模型綁定到div元素並繁榮排序。

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

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

來源

2017-08-18 07:52:40

KnockoutJS動態創建的局部視圖

回答

相關問題