如何将HTML5拖放与KnockoutJS结合使用？
如何将HTML5拖放与KnockoutJS结合使用？
提问于 2011-08-28 08:04:53
我似乎不能绑定到html5拖放事件。
下面是一个来自模板的示例：
<script id="tabsTemplate" type="text/html">
<div class="dropzone" for="tab"
data-bind="event:{dragover: function(event){event.preventDefault();},
dragenter: function(event){event.target.addClass('dragover'); event.preventDefault();},
dragleave: function(event){event.target.removeClass('dragover'); event.preventDefault();}}
drop: function(event){console.log('blahblah!')}"></div>
<h1 class="tab" draggable="true"
data-bind="attr: {selected: $data.name === $item.selected()},
click: function(){$item.selected($data.name)},
event:{ dragstart: function(event){console.log('blah!!')},
dragend: function(event){document.getElementsByClassName('dragover')[0].removeClass('dragover')}}">
${name}
<img src="icons/close-black.png" class="close button" role="button"
data-bind="click: function(e){$item.close($data)}">
</h1>
</script>我所拥有的应该能像预期的那样工作。只要我让它们成为普通的内联对象，它就会起作用。但是，其他绑定就不起作用了！
我收到以下错误消息：
jquery未捕获SyntaxError:意外的标记'||‘jquery-tmpl.js:10
这里发生了什么事？我是不是做错了什么？
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-08-29 18:06:21
好了，我已经算出来了。似乎我在文档中遗漏了，在knockout中，默认情况下，它使所有事件都阻止默认/返回false。所以我所要做的就是让我的dragstart处理程序返回true，现在它可以工作了。呼！！
Stack Overflow用户
发布于 2012-11-29 02:47:12
对于那些(像我这样)需要SSCCE工作的人；follow的cybermotron建议的解决方案还修复了处理程序期望参数数据和事件的问题。
http://jsfiddle.net/marrok/m63aJ/
HTML
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul id="people" data-bind='template: { name: "personTmpl", foreach: people }'>
</ul>
<div class="trash" data-bind ="visible:dragging, event:{
dragover: function(data, event){
event.preventDefault();
},
drop: function(data, event){
console.log('trash', $root.drag_start_index())
$root.trash($root.drag_start_index())
event.preventDefault();
}
}"> <span>DELETE</span> </div>
<script id="personTmpl" type="text/html">
<li class="draggable" draggable="true" data-bind="event:{
dragstart: function(data, event){
$(event.target).addClass('dragSource')
$root.drag_start_index($index());
return $(event.target).hasClass('draggable');},
dragend: function(data, event){
$root.drag_start_index(-1);
$(event.target).removeClass('dragSource')
return true;
},
dragover: function(data, event){event.preventDefault();},
dragenter: function(data, event){
$root.drag_target_index($index());
var element = $(event.target)
if(element.hasClass('draggable'))
element.toggleClass('dragover');
event.preventDefault();
},
dragleave: function(data, event, $index){
var element = $(event.target)
if(element.hasClass('draggable'))
element.toggleClass('dragover');
event.preventDefault();
},
drop: function(data, event){
$(event.target).removeClass('dragover');
console.log('swap', $root.drag_start_index(), $root.drag_target_index() )
$root.swap($root.drag_start_index(), $root.drag_target_index())
}
}">
<span data-bind='text: name'></span>
</li>
</script>淘汰赛
var Person = function(name) {
this.name = ko.observable(name);
};
var PeopleModel = function() {
var self = this;
self.drag_start_index = ko.observable();
self.drag_target_index = ko.observable();
self.dragging = ko.computed(function() {
return self.drag_start_index() >= 0;
});
self.people = ko.observableArray([
new Person("Oleh"), new Person("Nick C."), new Person("Don"), new Person("Ted"), new Person("Ben"), new Person("Joe"), new Person("Ali"), new Person("Ken"), new Person("Doug"), new Person("Ann"), new Person("Eve"), new Person("Hal")]);
self.trash = function(index) {
self.people.splice(index, 1)
}
self.swap = function(from, to) {
if (to > self.people().length - 1 || to < 0) return;
var fromObj = self.people()[from];
var toObj = self.people()[to];
self.people()[to] = fromObj;
self.people()[from] = toObj;
self.people.valueHasMutated()
}
};
ko.applyBindings(new PeopleModel());Stack Overflow用户
发布于 2011-08-28 12:42:41
您可能会遇到与前面提到的here相同的问题，尽管它指的是嵌套模板：
警告
如果要将templateOptions从嵌套模板传递给模板绑定(因此，从模板中指定模板绑定)，请特别注意您的语法。如果你的绑定看起来像这样，你会遇到一个问题：
<div data-bind="template: { name: 'items', data: newItems, templateOptions: { header: “New Items!”}}"></div> jQuery模板插件会被绑定末尾的{}弄糊涂，因为这是其语法的一部分。在大括号之间加一个空格就可以了。希望这能防止有人受到一点不必要的挫折。
<div data-bind="template: { name: 'items', data: newItems, templateOptions: { header: “New Items!”} }"></div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7218171
复制相关文章
相似问题