在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

回答

相關問題