ko.bindingHandler issue with Durandal
ko.bindingHandler issue with Durandal
我有一个问题得到Knockout绑定处理程序与Durandal工作。我目前有一个名为binding .js的文件,我正在通过RequireJS加载到名为todo.js的视图模型中。由于某些原因,绑定处理程序似乎没有附加。在添加待办事项并按键盘上的回车键后,输入键不起作用。感谢任何帮助。该项目的代码见https://github.com/robksawyer/durandal-todo。请随意用叉子。同样值得注意的是,大多数Knockout代码来自TodoMVC Knockout+Require项目。
下面是bindings.js文件的一个片段。文件位于https://github.com/robksawyer/durandal-todo/blob/master/scripts/bindings.js.
// a custom binding to handle the enter key (could go in a separate library)
ko.bindingHandlers.enterKey = {
init: function (element, valueAccessor, allBindingsAccessor, data) {
var wrappedHandler, newValueAccessor;
system.log("ENTER KEY PRESSED");
// wrap the handler with a check for the enter key
wrappedHandler = function (data, event) {
if (event.keyCode === config.ENTER_KEY) {
valueAccessor().call(this, data, event);
}
};
// create a valueAccessor with the options that we would want to pass to the event binding
newValueAccessor = function () {
return {
keyup: wrappedHandler
};
};
// call the real event binding's init function
ko.bindingHandlers.event.init(element, newValueAccessor, allBindingsAccessor, data);
}
};
下面是连接bindingHandler的HTML片段。文件在https://github.com/robksawyer/durandal-todo/blob/master/views/todos.html.
<header id="header">
<h1>todos</h1>
<input id="new-todo" type="text" data-bind="value: current, valueUpdate: 'afterkeydown', enterKey: add" placeholder="What needs to be done?" autofocus>
</header>
最后,这是加载它的视图模型的一个片段。文件位于https://github.com/robksawyer/durandal-todo/blob/master/viewmodels/todos.js.
define(
[
'knockout',
'jquery',
'durandal/app',
'durandal/system',
'scripts/dataservice',
'scripts/model',
'scripts/config',
'scripts/bindings',
'scripts/native'
],
function(ko, $, app, system, dataservice, model, config) {
'use strict';
var self = this;
var todos = ko.observableArray([]),
current = ko.observable(), // store the new todo value being entered
showMode = ko.observable('all');
// add a new todo, when enter key is pressed
var add = function() {
var current = current().trim();
if (current) {
todos.push(new model.Todo(current));
current('');
}
};
...
再次感谢您的宝贵时间。
Binding.js不是AMD格式,所以我建议在加载knockout后加载它,而不是将其声明为依赖项。scripts/native
是AMD格式吗?
define(
[
//'knockout', // Durandal expects knockout and $ loaded via script tag,
//'jquery', // no need to define them as deps as well
'durandal/app',
'durandal/system',
'scripts/dataservice',
'scripts/model',
'scripts/config',
//'scripts/bindings',
'scripts/native' // remove if not in AMD format
],
function(app, system, dataservice, model, config) {
'use strict';
相关文章:
- Fighting with FRP
- issue with FB.Event.subscribe
- geolocation-marker.js conflict with markerclusterer.js
- Angular 2.0 with JavaScript or TypeScript?
- 为什么不推荐使用“with”?是否有更好或其他方法可以“下降”到对象的命名空间
- WebComponentsJS with IE10
- 指令的模板必须只有一个根元素:With restrict E&替换true
- timeago.js with datatable and PHP
- Ajax and Json with Rails
- errors with Javascript try catch
- how to split a string with ','
- Understanding Javascript scope with "var that = this&qu
- Architecture for CPU intensive tasks with NodeJS & Socke
- How to declare a Map containing certain properties with flow
- 设置'这'在React with Inverse Data Flow中
- Unit-testing multiple use cases with Karma & Mocha.js
- Modify Javascript with C#
- 谷歌地图API v3:Initial View is Fine,but Gray Box with No Map if
- Using jQuery with classes from ES6
- ko.bindingHandler issue with Durandal