English 中文(简体)
支柱:如何在线编辑模型的属性
原标题:backbone.js: how to inline editing on attribute of a model

如何在网上编辑模型的属性,

例如,有<条码> 标准/标准

var Player = Backbone.Model.extend({
  defaults: {
    id: 0,
    name:   ,
    points: 0
  },
  initialize: function(){
    // irrelevant stuff happening here...
  },
  rename: function(newName){
    this.set({ name: newName });
  }
});

缩略语 意见

var PlayerRow = Backbone.View.extend({
  tagName:  li ,
  className:  player ,
  events: { 
     click span.score :   score ,
     blur input.name :  rename ,
     click div.playername :  renderRename 
  },   
  initialize: function(){
    _.bindAll(this,  render ,  rename );
    this.model.bind( change , this.render);
  },
  render: function(){
    var template = Tmpl.render("playerRow", { model : this.model });
    $(this.el).html(template);
    return this;
  },
  renderRename: function() {
    // i was thinking of switching the DOM into a textfield here
  },
  rename: function(){
    var inpt = $(this.el).find( input.name );
    var newName = (inpt.val() !=   ) ? inpt.val() :  no-name ;
    this.model.rename(newName);
  }
});

一、导 言 1. 罗模板

<script type="text/template" id="playerRow-template">
  <% if ( model.get( name ) ==    ) { %>
    <div class="state-edit"><input type="text" class="name" name="name"></input></div>
  <% } else { %>    
    <div class="playername"><%= model.get( name ) %></div>
  <% } %>
</script>

或者确定我模式的某些财产,即国家(违约或ed),触发重新招标,而在我的模板中,而不是测试<条码>。

或者说,在我的评论中,我这样说了。 仅将OMD转换成一个投入领域,但我想这是这样做的坏处。 这是否会给已经受到约束的事件造成麻烦? 简称:。

毫无疑问,为电ed形成新观点是最佳方法,因为一想在线编辑,仅就这个名称领域而言,不希望所有参与者模板的其余部分在角色模板和编辑模板中重复。

so, bottomline, my question: what is the best way, to handle inline editing

  1. a separate view
  2. inline just appending an input field (don t know if this works well with the bound events)
  3. having my model hold a state variable for this attribute (would work but sounds weird to have a model hold view related data)
最佳回答

一种不同的选择:

在线启动利用html的电离层特征。 无需改变/清除OMM,所有主要浏览器如果正确的话,都会有丰富的用户经验。

几个js-editors利用了这一工具,最值得注意的是Aloha编辑(浏览器支持检查),但无需其他很多东西(如丰富的文字编辑等)编辑,你可以方便地自行制作。

www.un.org/Depts/DGACM/index_spanish.htm EDIT:2012年6月:

Rolling your own becomes much easier when using the excellent range Library: http://code.google.com/p/rangy/

Hth, Geert-Jan

问题回答

我想有额外的投入,以防违约。 (这最接近于你的备选办法(2),但避免了模板中的条件,或仅仅增加内容。)

因此,该模板可能会看上去:

<div class="show-state">
    ... <%= name %> ...
    <input type="button" value="edit"/>
</div>
<div class="edit-state">   <!-- hidden with display: none in CSS -->
    ... <input type="text" value="<%= name %>"/> ...
</div>

从根本上说,它征求了两个国家的意见,即“how”和“沉积物”。 当用户点击“edit”时,我打电话this.$(show-state .hide();这句话(edit-state ).show()以示国家。

一旦电梯提交或取消,我就认为(在与服务器交谈和必要时更新模型的属性之后)重新回到原来的“how”状态,重新确定投入领域。

P.S. 铭记我的代码使特别安全局无法逃脱<条码>。





相关问题
selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

How to fire event handlers on the link using javascript

I would like to click a link in my page using javascript. I would like to Fire event handlers on the link without navigating. How can this be done? This has to work both in firefox and Internet ...

How to Add script codes before the </body> tag ASP.NET

Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...

Clipboard access using Javascript - sans Flash?

Is there a reliable way to access the client machine s clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google Docs do this? Do they use ...

javascript debugging question

I have a large javascript which I didn t write but I need to use it and I m slowely going trough it trying to figure out what does it do and how, I m using alert to print out what it does but now I ...

Parsing date like twitter

I ve made a little forum and I want parse the date on newest posts like twitter, you know "posted 40 minutes ago ","posted 1 hour ago"... What s the best way ? Thanx.

热门标签