在div上编辑附加文本 - knockout.js

使用knockout.js我使用按钮单击事件创建新的div元素。这个div在jquery ui的帮助下可以拖动。我也可以删除创建的div。但是，如何更改创建的div的附加文本？ JSFIDDLE 在div上编辑附加文本 - knockout.js

ko.bindingHandlers.draggable={ 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     $(element).draggable(); 
    } 
}; 

ko.bindingHandlers.droppable={ 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 
     $(element).droppable(); 
    } 
}; 

var vm=function(){ 
    var self=this; 
    self.items=ko.observableArray(); 
    self.textContent = ko.observable(''); 
    self.init=function(){ 
     self.items(['']); 
    } 
    self.remove=function(item){ 
     console.log(item); 
     self.items.remove(item); 
    } 
    self.addNew = function() { 
     self.items.push(self.textContent()); 
     self.textContent(''); 
    } 
    self.init(); 
} 

ko.applyBindings(new vm());

HTML

<textarea data-bind="value: textContent" Placeholder="Type text to append"></textarea> 
<button data-bind="click: addNew">Generate New Div</button> 
<div data-bind="foreach:items"> 
    <div href="#" class="item" data-bind="draggable:true,droppable:true"> 
     <span data-bind="click:$parent.remove">[X]</span><br><br> 
     <center><span data-bind="text:$data"></span></center> 
    </div> 
</div>

来源

2014-09-01 Code_Ed_Student

你怎么想编辑的文本？我的意思是点击某个按钮或其他方式？或者用文本双击创建的跨度，它将使跨度可编辑，以便您可以编辑它中的文本。 – 2014-09-01 04:55:41

@Yunus正确双击跨度，类似于这个例子：http://jsfiddle.net/rniemeyer/Jr2rE/但我似乎无法弄清楚\ – 2014-09-01 04:57:01

您可以通过添加编辑元素（例如，<input>）每<div class="item">并添加dblClick事件处理程序<div>文本元素（<span>）做手工显示<input>代替的<span>。

要从编辑文本返回到显示，您可以使用click事件处理程序从可编辑元素恢复为纯文本元素（<span>）。

Updated fiddle。

HTML：

<div href="#" class="item" data-bind="draggable:true,droppable:true"> 
    <span data-bind="click:$parent.remove">[X]</span> 
    <br/><br/> 
    <center> 
     <span class="text" data-bind="text:$data"></span> 
     <input class="edit_text"/> 
    </center> 
</div>

CSS：

.edit_text 
{ 
    display: none; 
}

的JavaScript：

$(document).on("dblclick", '.text', function() 
{ 
    $(this).hide(); 
    $(this).closest('.item').find('.edit_text').val($(this).text()).show(); 
}); 

$(document).on("click", ".edit_text", function() 
{ 
    return false; 
}); 


$(document).on("click", function() 
{ 
    var editingText = $('.edit_text:visible'); 
    if (editingText.length) 
    { 
     editingText.hide(); 
     editingText.closest('.item').find('.text').text($(editingText).val()).show(); 
    } 
});

来源

2014-09-01 05:31:28 Regent

在div上编辑附加文本 - knockout.js

回答

相关问题