KnockoutJS 3.X API 第四章之click绑定

目的

目的

click绑定主要作用是用于DOM元素被点击时调用相关JS函数。最常见用于button、input、a元素。

威尼斯网址开户网站,例如:

You’ve clicked times

Click me

源码:

<div>
    You've clicked  times
    <button data-bind="click: incrementClickCounter">Click me</button>
</div>

<script type="text/javascript">
    var viewModel = {
        numberOfClicks : ko.observable(0),
        incrementClickCounter : function() {
            var previousCount = this.numberOfClicks();
            this.numberOfClicks(previousCount + 1);
        }
    };
</script>

如上述例子,没点过button被点击时都会触发incrementClickCounter
回调函数,从而更新视图状态。

备注,click后所跟的并不一定非得是视图模型的函数。可以是任何对象的函数,直接引用即可。例如:click: someObject.someFunction

Knockout是一个以数据模型(data
model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库。任何时候如果你的UI需要自动更新(比如:更新依赖于用户的行为或者外部数据源的改变),KO能够很简单的帮你实现并且很容易维护。

with绑定的目的

目的

click绑定主要作用是用于DOM元素被点击时调用相关JS函数。最常见用于button、input、a元素。

备注1:传递一个参数

当您的处理程序中,UI展示了一个监控属性数组,例如:

  • Remove

源码:

<ul data-bind="foreach: places">
    <li>

        <button data-bind="click: $parent.removePlace">Remove</button>
    </li>
</ul>

 <script type="text/javascript">
     function MyViewModel() {
         var self = this;
         self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);

         // The current item will be passed as the first parameter, so we know which place to remove
         self.removePlace = function(place) {
             self.places.remove(place)
         }
     }
     ko.applyBindings(new MyViewModel());
</script>

当点击remove时只会删除当前的项目,从源码上看,说明传递的是当前项目。这种在渲染集合数据的时候特别有用。

需要注意两点:

  • 如果你是一个嵌套在绑定上下文,例如,如果使用foreachwith绑定,但你的处理函数是根视图模型或其他一些父模型,你需要使用一个前缀,如$parent$root定位处理函数。
  • 在您的视图模型,但是这是可以使用self(或其他一些变量)作为this的一个别名

重要特性:

使用with绑定的格式为data-bind=”with:attribute”,使用with绑定会将其后所跟的属性看作一个新的上下文进行绑定。with绑定内部的所有元素将受到该上下文的约束。

event绑定即为事件绑定,即当触发相关DOM事件的时候回调函数。例如keypress,mouseover或者mouseout等

例如:

备注2:传递事件对象(多参数)

一些情况下,你可能需要访问DOM的事件对象(event),一般情况下KO会将事件对象作为第二个参数传递给函数。例如:

<button data-bind="click: myFunction">
    Click me
</button>

 <script type="text/javascript">
    var viewModel = {
        myFunction: function(data, event) {
            if (event.shiftKey) {
                //do something different when user has shift key down
            } else {
                //do normal action
            }
        }
    };
    ko.applyBindings(viewModel);
</script>

如果你要传递更多的参数,可以使用函数文本的方式。例如:

<button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }">
    Click me
</button>

还有更优雅的写法,比如使用bind函数绑定多个参数。例如:

<button data-bind="click: myFunction.bind($data, 'param1', 'param2')">
    Click me
</button>

优雅的依赖追踪 –
不管任何时候你的数据模型更新,都会自动更新相应的内容。

当然,with绑定也可配合if或foreach绑定一起使用。

例如:

You've clicked 0timesClick me

备注3:允许默认点击动作

默认情况下,Ko会阻止任何默认动作。比如你把click绑定到一个a标签上,当点击时,浏览器会调用click绑定的回调函数。但是不会执行href的连接跳转。

如果你不希望这种默认的阻止动作。可以在回调函数中返回true。

声明式绑定 –
浅显易懂的方式将你的用户界面指定部分关联到你的数据模型上。

示例1

Mouse over me

源码:

备注4:防止冒泡事件

默认情况下,KO允许click绑定继续到任何高级别的事件处理。例如,父元素和子元素都有click绑定,那么这两个元素的click绑定会都被触发。

可以使用一个附加绑定clickBubble来解决该问题:

<div data-bind="click: myDivHandler">
    <button data-bind="click: myButtonHandler, clickBubble: false">
        Click me
    </button>
</div>

如上述例子,myButtonHandler将被调用,而附件绑定clickBubble,并设置了false,这至使父元素的myDivHandler不会被调用。

轻易可扩展 – 几行代码就可以实现自定义行为作为新的声明式绑定。

<h1 data-bind="text: city"> </h1>
<p data-bind="with: coords">
Latitude:  ,
Longitude:  
</p>
<script type="text/javascript">
ko.applyBindings({
city: "London",
coords: {
latitude: 51.5001524,
longitude: -0.1262362
}
});
</script>

源码:

<div>
You've clicked  times
<button data-bind="click: incrementClickCounter">Click me</button>
</div>
<script type="text/javascript">
var viewModel = {
numberOfClicks : ko.observable(0),
incrementClickCounter : function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
};
</script>

备注5:与Jquery互动

如果存在Jquery的click事件,KO将会去调用Jquery的click事件,如果你想总是使用自己本地的事件来处理,可以在ko.applyBindings中加入如下代码:

ko.options.useOnlyNativeEvents = true;

额外的好处:

本例中,通过with直接绑定了coords监控属性,并在其内部直接调用了coords监控属性的内部属性。这里就体现了with绑定的特性。

<div>
<div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
Mouse over me
</div>
<div data-bind="visible: detailsEnabled">
Details
</div>
</div>
<script type="text/javascript">
var viewModel = {
detailsEnabled: ko.observable(false),
enableDetails: function() {
this.detailsEnabled(true);
},
disableDetails: function() {
this.detailsEnabled(false);
}
};
ko.applyBindings(viewModel);
</script>

如上述例子,没点过button被点击时都会触发incrementClickCounter
回调函数,从而更新视图状态。

纯JavaScript类库 – 兼容任何服务器端和客户端技术

示例2:一个互动的例子

如上述例子,当鼠标指针移入或者移出Mouse over
me时,对于detailsEnabled的值设定true或者false。进而控制Details的显示和隐藏。

备注,click后所跟的并不一定非得是视图模型的函数。可以是任何对象的函数,直接引用即可。例如:click:
someObject.someFunction。

可添加到Web程序最上部 – 不需要大的架构改变

威尼斯网址开户网站 1

和click一样,event后边所跟的格式一般为:event { mouseover:
someObject.someFunction
},其中的回调函数并不一定非要是视图模型的函数,他可以时任何对象的函数。

备注1:传递一个参数

简洁的 – Gzip之前大约25kb

该例子中将使用with绑定动态添加和删除其绑定值为null/undefined或非null/undefined

备注1:传递一个当前项目作为参数

当您的处理程序中,UI展示了一个监控属性数组,例如:

兼容任何主流浏览器 – (IE 6+、Firefox 2+、Chrome、Safari、其它)

UI源码:

London
Paris
Tokyo
You seem to be interested in:

LondonRemove
ParisRemove
TokyoRemove

采用行为驱动开发 – 意味着在新的浏览器和平台上可以很容易通过验证。

<form data-bind="submit: getTweets">
Twitter account:
<input data-bind="value: twitterName" />
<button type="submit">Get tweets</button>
</form>
<div data-bind="with: resultData">
<h3>Recent tweets fetched at  </h3>
<ol data-bind="foreach: topTweets">
<li data-bind="text: text"></li>
</ol>
<button data-bind="click: $parent.clearResults">Clear tweets</button>
</div>

源码:

源码:

目的

视图模型源码:

<ul data-bind="foreach: places">
<li data-bind="text: $data, event: { mouseover: $parent.logMouseOver }"> </li>
</ul>
<p>You seem to be interested in:  </p>
<script type="text/javascript">
function MyViewModel() {
var self = this;
self.lastInterest = ko.observable();
self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);

// The current item will be passed as the first parameter, so we know which place was hovered over
self.logMouseOver = function(place) {
self.lastInterest(place);
}
}
ko.applyBindings(new MyViewModel());
</script>
<ul data-bind="foreach: places">
<li>

<button data-bind="click: $parent.removePlace">Remove</button>
</li>
</ul>
<script type="text/javascript">
function MyViewModel() {
var self = this;
self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);
// The current item will be passed as the first parameter, so we know which place to remove
self.removePlace = function(place) {
self.places.remove(place)
}
}
ko.applyBindings(new MyViewModel());
</script>

value绑定主要用于DOM元素给视图模型赋值用的。通常用于<input><select><textarea>等元素。

function AppViewModel() {
var self = this;
self.twitterName = ko.observable('@example');
self.resultData = ko.observable(); // No initial value
self.getTweets = function() {
var name = self.twitterName(),
simulatedResults = [
{ text: name + ' What a nice day.' },
{ text: name + ' Building some cool apps.' },
{ text: name + ' Just saw a famous celebrity eating lard. Yum.' }
];
self.resultData({ retrievalDate: new Date(), topTweets: simulatedResults });
}
self.clearResults = function() {
self.resultData(undefined);
}
}
ko.applyBindings(new AppViewModel());

需要注意,如果你使用的是嵌套绑定上下文,比如foreach或者with,而需要处理的回调函数在视图模型中或者在父模型中,需要使用$parent或者$root前缀来进行绑定

当点击remove时只会删除当前的项目,从源码上看,说明传递的是当前项目。这种在渲染集合数据的时候特别有用。

value绑定与text绑定的区别在于,value绑定中当用户编辑表单控件相关值的时候,值会自动更新视图模型的相关属性值,当视图模型的相关属性值被更新后,表单中相关的value绑定也会随之变化。

备注:with的无容器绑定(虚拟绑定)

与click绑定一样,给this取个别名比较好。

需要注意两点:

value绑定就像DOM和ViewModel的一个双向通道。而text绑定只是ViewModel到DOM的单向通道。

像if、foreach等的虚拟绑定一样,with绑定也一样。使用<!– ko
–>和<!– /ko –>进行。

备注2:传递多个参数

如果你是一个嵌套在绑定上下文,例如,如果使用foreach或with绑定,但你的处理函数是根视图模型或其他一些父模型,你需要使用一个前缀,如$parent或$root定位处理函数。
在您的视图模型,但是这是可以使用self(或其他一些变量)作为this的一个别名。

例如:

<ul>
<li>Header element</li>
<!-- ko with: outboundFlight -->
...
<!-- /ko -->
<!-- ko with: inboundFlight -->
...
<!-- /ko -->
</ul>

此处请参考click绑定:

备注2:传递事件对象(多参数)

<p>Login name: <input data-bind="value: userName" /></p>
<p>Password: <input type="password" data-bind="value: userPassword" /></p>
<script type="text/javascript">
var viewModel = {
userName: ko.observable(""), // Initially blank
userPassword: ko.observable("abc"), // Prepopulate
};
</script>

以上所述是小编给大家介绍的KnockoutJS 3.X API
第四章之数据控制流with绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

<div data-bind="event: { mouseover: myFunction }">
Mouse over me
</div>
<script type="text/javascript">
var viewModel = {
myFunction: function(data, event) {
if (event.shiftKey) {
//do something different when user has shift key down
} else {
//do normal action
}
}
};
ko.applyBindings(viewModel);
</script>

一些情况下,你可能需要访问DOM的事件对象(event),一般情况下KO会将事件对象作为第二个参数传递给函数。例如:

一些细节

您可能感兴趣的文章:

  • KnockoutJS 3.X API
    第四章之数据控制流foreach绑定
  • KnockoutJS 3.X API
    第四章之数据控制流if绑定和ifnot绑定
  • KnockoutJS 3.X API
    第四章之数据控制流component绑定
  • KnockoutJS 3.X API
    第四章之click绑定
  • KnockoutJS 3.X API
    第四章之事件event绑定
  • KnockoutJS 3.X API
    第四章之表单submit、enable、disable绑定
  • KnockoutJS 3.X API
    第四章之表单value绑定
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
  • KnockoutJS 3.X API
    第四章之表单textInput、hasFocus、checked绑定

封装多参数示例:

<button data-bind="click: myFunction">
Click me
</button>
<script type="text/javascript">
var viewModel = {
myFunction: function(data, event) {
if (event.shiftKey) {
//do something different when user has shift key down
} else {
//do normal action
}
}
};
ko.applyBindings(viewModel);
</script>

主要技术细节:

<div data-bind="event: { mouseover: function(data, event) { myFunction('param1', 'param2', data, event) } }">
Mouse over me
</div>

如果你要传递更多的参数,可以使用函数文本的方式。例如:

KO将会使用初始值设置value绑定的元素。当有新的值的时候,初始值将被覆盖
如果value绑定的是监控属性,那么之后的属性值更新就会被体现在DOM的value绑定上,如果不是监控属性,则只有第一次运行会更新DOM上的value绑定的值,之后就不会再变了。

使用bind函数示例:

<button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }">
Click me
</button>

如果你的value绑定不是数值型或字符型数据(例如一个对象或数组),那显示的文本内容将等同于yourParameter.toString()。最好还是绑定值型或字符型数据。

<button data-bind="event: { mouseover: myFunction.bind($data, 'param1', 'param2') }">
Click me
</button>

还有更优雅的写法,比如使用bind函数绑定多个参数。例如:

当用户编辑表单控件修改基于value绑定的元素值并移出焦点后,KO就会自动更新对应的视图模型的属性值,你也可以通过使用valueUpdate事件来控制。

备注3:允许默认动作

<button data-bind="click: myFunction.bind($data, 'param1', 'param2')">
Click me
</button>

其他技术细节:

同click绑定一样,ko禁止默认动作,比如你将event的keypress事件绑定到一个Input元素上,那这个input元素输入的值将会被keypress回调占用而无法输入任何信息。解决方案很简单,就是在回调函数中返回true即可。

备注3:允许默认点击动作

valueUpdate,KO定义了一系列的change事件,最常用包括如下事件:

备注4:防止冒泡事件

默认情况下,Ko会阻止任何默认动作。比如你把click绑定到一个a标签上,当点击时,浏览器会调用click绑定的回调函数。但是不会执行href的连接跳转。

“input”-<input>或<textarea>元素的变化更新您的视图模型时的值。

如果要防止冒泡事件,可以直接在事件绑定后附加一个youreventBubble绑定。将该附加绑定设置为false则禁止冒泡事件的发生,例如:

如果你不希望这种默认的阻止动作。可以在回调函数中返回true。

“keyup” – 当用户释放某个键更新您的视图模型

<div data-bind="event: { mouseover: myDivHandler }">
<button data-bind="event: { mouseover: myButtonHandler }, mouseoverBubble: false">
Click me
</button>
</div>

备注4:防止冒泡事件

“keypress”-当用户输入一个值更新您的视图模型。不像keyup,这个会反复更新

备注5:Jquery互动

默认情况下,KO允许click绑定继续到任何高级别的事件处理。例如,父元素和子元素都有click绑定,那么这两个元素的click绑定会都被触发。

“afterkeydown”-当用户开始输入一个字符尽快更新您的视图模型。这通过捕获浏览器的keydown事件,并异步处理该事件。这

以上所述是小编给大家介绍的KnockoutJS 3.X API
第四章之事件event绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

可以使用一个附加绑定clickBubble来解决该问题:

个事件在一些移动客户端可能不会起什么作用。

您可能感兴趣的文章:

  • KnockoutJS 3.X API
    第四章之数据控制流foreach绑定
  • KnockoutJS 3.X API
    第四章之数据控制流if绑定和ifnot绑定
  • KnockoutJS 3.X API
    第四章之数据控制流with绑定
  • KnockoutJS 3.X API
    第四章之数据控制流component绑定
  • KnockoutJS 3.X API
    第四章之click绑定
  • KnockoutJS 3.X API
    第四章之表单submit、enable、disable绑定
  • KnockoutJS 3.X API
    第四章之表单value绑定
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
  • KnockoutJS 3.X API
    第四章之表单textInput、hasFocus、checked绑定
<div data-bind="click: myDivHandler">
<button data-bind="click: myButtonHandler, clickBubble: false">
Click me
</button>
</div>

valueAllowUnset,适用于<select>的value绑定,其他元素不起作用,具体请参考之后的备注2.

如上述例子,myButtonHandler将被调用,而附件绑定clickBubble,并设置了false,这至使父元素的myDivHandler不会被调用。

备注1:实时更新

备注5:与Jquery互动

如果你想要实时更新<input>或者<textarea>到你的视图模型,可以使用textInput绑定。具体的textInput细节将在之后的章节提到。

如果存在Jquery的click事件,KO将会去调用Jquery的click事件,如果你想总是使用自己本地的事件来处理,可以在ko.applyBindings中加入如下代码:

备注2:下拉列表<select>的绑定

ko.options.useOnlyNativeEvents = true;

KO在下拉列表绑定中,需要使用value绑定和options绑定(options绑定将在以后的章节中提到)。

以上所述是小编给大家介绍的KnockoutJS 3.X API
第四章之click绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

使用valueAllowUnset与<select>元素

您可能感兴趣的文章:

  • KnockoutJS 3.X API
    第四章之数据控制流foreach绑定
  • KnockoutJS 3.X API
    第四章之数据控制流if绑定和ifnot绑定
  • KnockoutJS 3.X API
    第四章之数据控制流with绑定
  • KnockoutJS 3.X API
    第四章之数据控制流component绑定
  • KnockoutJS 3.X API
    第四章之事件event绑定
  • KnockoutJS 3.X API
    第四章之表单submit、enable、disable绑定
  • KnockoutJS 3.X API
    第四章之表单value绑定
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
  • KnockoutJS 3.X API
    第四章之表单textInput、hasFocus、checked绑定

威尼斯网址开户网站 2

Select a country:

源码:

<p>
Select a country:
<select data-bind="options: countries,
optionsCaption: 'Choose one...',
value: selectedCountry,
valueAllowUnset: true"></select>
</p>
<script type="text/javascript">
var viewModel = {
countries: ['Japan', 'Bolivia', 'New Zealand'],
selectedCountry: ko.observable('Latvia')
};
</script>

有很多时候,我们希望下拉列表中包含一个空白的或者没有包含在数据集合中的元素,比如choose
one…,那么就可以使用valueAllowUnset:true来带到目的。如上述例子一样。

selectedCountry将保留Latvia,并将下拉列表中空白匹配给它。

备注3:绑定监控属性和非监控属性

如果你使用value绑定的是一个监控属性,KO是能够建立一个双向绑定。

但是如果value绑定是一个非监控属性,则KO会进行以下处理:

如果引用一个简单的属性,也就是说,它只是在你的视图模型一个普通的属性,表单元素编辑时KO将设置表单元素的初始状态属性值。

例如:

First value:
hello
First value:hello
Second value:
hello, again
Second value: hello, again
Third value:
true

威尼斯网址开户网站 3

源码:

<p>First value: <input data-bind="value: firstValue"></p>
<p>First value:</p>
<!-- One-way binding. Populates textbox; syncs only from textbox to model. -->
<p>Second value: <input data-bind="value: secondValue"></p>
<p>Second value: </p>
<!-- No binding. Populates textbox, but doesn't react to any changes. -->
<p>Third value: <input data-bind="value: secondValue.length > 8"></p>
<script type="text/javascript">
var viewModel = {
firstValue: ko.observable("hello"), // Observable
secondValue: "hello, again" // Not observable
};
ko.applybindings(viewModel,document.getElementById("eq2"));
</script>

以上所述是小编给大家介绍的KnockoutJS 3.X API
第四章之表单value绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • KnockoutJS 3.X API
    第四章之数据控制流foreach绑定
  • KnockoutJS 3.X API
    第四章之数据控制流if绑定和ifnot绑定
  • KnockoutJS 3.X API
    第四章之数据控制流with绑定
  • KnockoutJS 3.X API
    第四章之数据控制流component绑定
  • KnockoutJS 3.X API
    第四章之click绑定
  • KnockoutJS 3.X API
    第四章之事件event绑定
  • KnockoutJS 3.X API
    第四章之表单submit、enable、disable绑定
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
  • KnockoutJS 3.X API
    第四章之表单textInput、hasFocus、checked绑定

相关文章