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动态创建的局部视图

回答

相关问题