knockout js 事件默认加载和数组更新方法

JavaScript018

knockout js 事件默认加载和数组更新方法,第1张

1、前端使用knockoutJs框架,在foreach遍历中添加弹出框事件,如何对foreach出来的数据进行修改?

试过其他几种方法,是可以更新数组中的数据,但是页面没有变化。也没有找到刷新数组可行的方法。不知道有没有更好的办法。

2、在 data-bind="click: $parent.sale" ,如果想传递参数的话, 那么进到页面默认就会加载一次,如果是循环的话,那么就会循环N次。如果想传参数,但是又不让事件默认加载的话,可以使用匿名的方法,如下:

  

清除/删除Knockout.js观察的绑定方法:

VIEW模型:

<h3>2、移除绑定</h3>

<div id="divSample2">

原始值:<span id='span1' data-bind='text: des'></span><br/>

对照值:<span id='span2' data-bind='text: des'></span><br/>

<a href="javascript:void(0)" onclick="changeModelValue()">改变model属性值</a>

<a href="javascript:void(0)" onclick="removeBingding()">去除"对照值"的绑定</a>

</div>

VM模型:

<script type="text/javascript">

var viewModel = function () {

this.des = ko.observable("this is a demo")

}

var myModel = new viewModel()

ko.applyBindings(myModel, document.getElementById("divSample2"))

//改变des值

function changeModelValue(){

myModel.des(new Date().valueOf())

}

//移除绑定

function removeBingding(){

var span2 = document.getElementById("span2")

alert(span2.getAttribute('data-bind'))

span2.setAttribute("data-bind", "")

alert(span2.getAttribute('data-bind'))

ko.cleanNode(span2)

ko.applyBindings(myModel, span2)

}

</script>

看看例子,首先我们要在原有的项目中添加jquery.livequery.js ,knockout.multimodels-0.1.min.js 。(这里是有先后顺序的)

之后你需要替换你的applyBindings 取而代之:

ko.attach("clientVM", clientVM)

ko.attach("postVM", postVM)

之后你需要通过页面绑定,并制定你的viewModel的所在范围:

<div class="comment_content" data-model="postVM">

<ul data-bind="template:{name:'postTemplate',foreach: postVM.postList}">

</ ul >

</ div>

<div class="right" data-model="clientVM">

<div class="device_display">

<div class="device_borderleft"></ div>

<div class="device_borderright"></ div>

<ul class="device_list" data-bind="template:{name:'menuTemplate',foreach: clientVM.mobileList}">

</ u l>

<div class="device_float"></ div>

<div class="right_bottom">

<div class="minimg_bg" data-bind="template:{name:'mobileIntroTemplate',foreach: clientVM.mobileList}">

</ div >

<div data-bind="template:{name:'mobileTemplate',foreach: clientVM.mobileList}">

</ div>

</div >

<div class="right_bottomborder">

<div class="bottomborder_left"></ div>

<div class="bottomborder_right"></ div>

</ div>

</ div>