流星 - 有沒有一種方法可以讓div可用雙向數據綁定工作？

無法將雙向數據綁定附加到<div contenteditable>標記。 Here is the demo 流星 - 有沒有一種方法可以讓div可用雙向數據綁定工作？

HTML：

<body> 
    <div contenteditable style="height:40px;min-width:40px">{{content}}</div> 
</body>

JS：

if (Meteor.isClient) { 
    Session.setDefault('content', 'Try to edit me') 

    Template.body.helpers({ 
     content: function() { 
      return Session.get('content') 
     } 
    }) 

    Template.body.events({ 
     'keydown div': function (e) { 
      setTimeout(function(){ Session.set('content', $(e.target).text()) }) 
     } 
    }) 
}

還有一個在github上這一個open issue。

來源

2015-03-08 brg

嘗試模糊事件，它會保存內容後，你失去了專注於div – Sindis 2015-03-08 22:48:50

@辛迪斯的作品，但它也很高興它也可以在keydown工作： - \ – brg 2015-03-08 23:26:35

如何event.keyCode，只需添加char keyCode到會話 – Sindis 2015-03-09 00:13:55

你可以用你的榜樣的 '輸入' 事件

meteorpad叉： http://meteorpad.com/pad/x3JQpGiqpE2FrTfLK/content%20editable

相關的問題： contenteditable change events

Template.body.events({ 
    'input div': function (e) { 
     Session.set('content', $(e.target).text()); 
    } 
    });

然而，有約束力的可編輯元素的問題一般情況下，您會注意到每個輸入事件都會導致文本設置兩次。

您可以通過每個編輯後清理出的可編輯的文本解決這個問題：

Template.body.events({ 
    'input div': function (e) { 
     Session.set('content', $(e.target).text()); 
     $(e.target).text(''); 
    } 
    });

但現在你有另外一個問題，光標跳到開始。

爲了解決這些難題，我用這樣的邏輯：「難道用戶使這個最近編輯的數據模型」

用用戶最近的文本更新數據模型。不要更新文本編輯器。要樂觀。
如果更新失敗，設置文本編輯器中的數據模型（恢復他們的編輯，顯示一些錯誤）

「難道除了用戶的東西改變文本的數據模型？」

更新的文本編輯器來顯示最近文本

來源

2015-03-08 23:19:31 looshi

，那麼你也可能想要使用下劃線的反跳輸入事件來獲得更好的性能。 – looshi 2015-03-08 23:21:52

或者只是使用https://github.com/gwendall/meteor-bindings。它利用反應變量將任何DOM元素綁定到輸入。

聲明：我建立它。

來源

2015-03-12 16:41:54 gwendall

這是否適用於Mongo收藏？ – brg 2015-03-13 18:05:40

你有什麼精確的用例？ – gwendall 2015-03-13 18:11:57

要數據綁定集合中的特定屬性？ – brg 2015-03-15 06:33:29

流星 - 有沒有一種方法可以讓div可用雙向數據綁定工作？

回答

相關問題