Javascript 敲除值绑定未正确更新

我根据以下示例开始创建带敲除的可编辑表格：

<div data-bind="foreach: teams">
                    <aside class="profile-nav alt">
                        <section class="panel">
                            <div class="user-heading alt gray-bg"> <a href="#">
                                 <img src="images/lock_thumb.jpg" alt="" />
                             </a>

                                 <h1>
                                     <span data-bind="text: name, visible: !$root.isItemEditing($data)"></span>
                                     <input type="text"  data-bind="value: name.editValue, visible: $root.isItemEditing($data)"  />
                                     <i class="fa fa-pencil" data-bind="click: $root.editItem.bind($root), visible: !$root.isItemEditing($data)"></i>
                                     <i class="fa fa-check" data-bind="click: $root.applyItem.bind($root), visible: $root.isItemEditing($data)"></i>

                                 </h1>

                                <p>Nombre del lider</p>
                            </div>
                            <ul class="nav nav-pills nav-stacked">
                                <li><a href="javascript:;"> <i class="fa fa-envelope-o"></i> Mail Inbox <span class="badge label-success pull-right r-activity">10</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-tasks"></i> Recent Activity <span class="badge label-danger pull-right r-activity">15</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-bell-o"></i> Notification <span class="badge label-success pull-right r-activity">11</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-comments-o"></i> Message <span class="badge label-warning pull-right r-activity">03</span></a>

                                </li>
                            </ul>
                        </section>
                    </aside>
                </div>

http://jsfiddle.net/peterf/8FMPc/light/

<div data-bind="foreach: teams">
                    <aside class="profile-nav alt">
                        <section class="panel">
                            <div class="user-heading alt gray-bg"> <a href="#">
                                 <img src="images/lock_thumb.jpg" alt="" />
                             </a>

                                 <h1>
                                     <span data-bind="text: name, visible: !$root.isItemEditing($data)"></span>
                                     <input type="text"  data-bind="value: name.editValue, visible: $root.isItemEditing($data)"  />
                                     <i class="fa fa-pencil" data-bind="click: $root.editItem.bind($root), visible: !$root.isItemEditing($data)"></i>
                                     <i class="fa fa-check" data-bind="click: $root.applyItem.bind($root), visible: $root.isItemEditing($data)"></i>

                                 </h1>

                                <p>Nombre del lider</p>
                            </div>
                            <ul class="nav nav-pills nav-stacked">
                                <li><a href="javascript:;"> <i class="fa fa-envelope-o"></i> Mail Inbox <span class="badge label-success pull-right r-activity">10</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-tasks"></i> Recent Activity <span class="badge label-danger pull-right r-activity">15</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-bell-o"></i> Notification <span class="badge label-success pull-right r-activity">11</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-comments-o"></i> Message <span class="badge label-warning pull-right r-activity">03</span></a>

                                </li>
                            </ul>
                        </section>
                    </aside>
                </div>

为了便于阅读，我用咖啡脚本重写了它。这是我的版本

<div data-bind="foreach: teams">
                    <aside class="profile-nav alt">
                        <section class="panel">
                            <div class="user-heading alt gray-bg"> <a href="#">
                                 <img src="images/lock_thumb.jpg" alt="" />
                             </a>

                                 <h1>
                                     <span data-bind="text: name, visible: !$root.isItemEditing($data)"></span>
                                     <input type="text"  data-bind="value: name.editValue, visible: $root.isItemEditing($data)"  />
                                     <i class="fa fa-pencil" data-bind="click: $root.editItem.bind($root), visible: !$root.isItemEditing($data)"></i>
                                     <i class="fa fa-check" data-bind="click: $root.applyItem.bind($root), visible: $root.isItemEditing($data)"></i>

                                 </h1>

                                <p>Nombre del lider</p>
                            </div>
                            <ul class="nav nav-pills nav-stacked">
                                <li><a href="javascript:;"> <i class="fa fa-envelope-o"></i> Mail Inbox <span class="badge label-success pull-right r-activity">10</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-tasks"></i> Recent Activity <span class="badge label-danger pull-right r-activity">15</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-bell-o"></i> Notification <span class="badge label-success pull-right r-activity">11</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-comments-o"></i> Message <span class="badge label-warning pull-right r-activity">03</span></a>

                                </li>
                            </ul>
                        </section>
                    </aside>
                </div>

但是，第一次初始化表格时，当您单击铅笔编辑单元格时，输入文本只显示空输入，不显示任何值

<div data-bind="foreach: teams">
                    <aside class="profile-nav alt">
                        <section class="panel">
                            <div class="user-heading alt gray-bg"> <a href="#">
                                 <img src="images/lock_thumb.jpg" alt="" />
                             </a>

                                 <h1>
                                     <span data-bind="text: name, visible: !$root.isItemEditing($data)"></span>
                                     <input type="text"  data-bind="value: name.editValue, visible: $root.isItemEditing($data)"  />
                                     <i class="fa fa-pencil" data-bind="click: $root.editItem.bind($root), visible: !$root.isItemEditing($data)"></i>
                                     <i class="fa fa-check" data-bind="click: $root.applyItem.bind($root), visible: $root.isItemEditing($data)"></i>

                                 </h1>

                                <p>Nombre del lider</p>
                            </div>
                            <ul class="nav nav-pills nav-stacked">
                                <li><a href="javascript:;"> <i class="fa fa-envelope-o"></i> Mail Inbox <span class="badge label-success pull-right r-activity">10</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-tasks"></i> Recent Activity <span class="badge label-danger pull-right r-activity">15</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-bell-o"></i> Notification <span class="badge label-success pull-right r-activity">11</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-comments-o"></i> Message <span class="badge label-warning pull-right r-activity">03</span></a>

                                </li>
                            </ul>
                        </section>
                    </aside>
                </div>

输入值并单击复选框后，无论何时尝试编辑单元格，都会在文本输入中显示正确的编辑值

<div data-bind="foreach: teams">
                    <aside class="profile-nav alt">
                        <section class="panel">
                            <div class="user-heading alt gray-bg"> <a href="#">
                                 <img src="images/lock_thumb.jpg" alt="" />
                             </a>

                                 <h1>
                                     <span data-bind="text: name, visible: !$root.isItemEditing($data)"></span>
                                     <input type="text"  data-bind="value: name.editValue, visible: $root.isItemEditing($data)"  />
                                     <i class="fa fa-pencil" data-bind="click: $root.editItem.bind($root), visible: !$root.isItemEditing($data)"></i>
                                     <i class="fa fa-check" data-bind="click: $root.applyItem.bind($root), visible: $root.isItemEditing($data)"></i>

                                 </h1>

                                <p>Nombre del lider</p>
                            </div>
                            <ul class="nav nav-pills nav-stacked">
                                <li><a href="javascript:;"> <i class="fa fa-envelope-o"></i> Mail Inbox <span class="badge label-success pull-right r-activity">10</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-tasks"></i> Recent Activity <span class="badge label-danger pull-right r-activity">15</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-bell-o"></i> Notification <span class="badge label-success pull-right r-activity">11</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-comments-o"></i> Message <span class="badge label-warning pull-right r-activity">03</span></a>

                                </li>
                            </ul>
                        </section>
                    </aside>
                </div>

第二次工作正常这一事实表明输入正确应用似乎是knckout如何更新绑定第一个tieme的值的问题

<div data-bind="foreach: teams">
                    <aside class="profile-nav alt">
                        <section class="panel">
                            <div class="user-heading alt gray-bg"> <a href="#">
                                 <img src="images/lock_thumb.jpg" alt="" />
                             </a>

                                 <h1>
                                     <span data-bind="text: name, visible: !$root.isItemEditing($data)"></span>
                                     <input type="text"  data-bind="value: name.editValue, visible: $root.isItemEditing($data)"  />
                                     <i class="fa fa-pencil" data-bind="click: $root.editItem.bind($root), visible: !$root.isItemEditing($data)"></i>
                                     <i class="fa fa-check" data-bind="click: $root.applyItem.bind($root), visible: $root.isItemEditing($data)"></i>

                                 </h1>

                                <p>Nombre del lider</p>
                            </div>
                            <ul class="nav nav-pills nav-stacked">
                                <li><a href="javascript:;"> <i class="fa fa-envelope-o"></i> Mail Inbox <span class="badge label-success pull-right r-activity">10</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-tasks"></i> Recent Activity <span class="badge label-danger pull-right r-activity">15</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-bell-o"></i> Notification <span class="badge label-success pull-right r-activity">11</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-comments-o"></i> Message <span class="badge label-warning pull-right r-activity">03</span></a>

                                </li>
                            </ul>
                        </section>
                    </aside>
                </div>

注: beginEdit函数在第一次设置self.EditValue时，使输入文本中的绑定在第一次加载时就已经存在，在单击检查时，它也存在该值，因为它调用了更新函数，该函数使用property.EditValue更新该值，并且该值不是空的，看起来knockout并没有显示值，因为它退出了

<div data-bind="foreach: teams">
                    <aside class="profile-nav alt">
                        <section class="panel">
                            <div class="user-heading alt gray-bg"> <a href="#">
                                 <img src="images/lock_thumb.jpg" alt="" />
                             </a>

                                 <h1>
                                     <span data-bind="text: name, visible: !$root.isItemEditing($data)"></span>
                                     <input type="text"  data-bind="value: name.editValue, visible: $root.isItemEditing($data)"  />
                                     <i class="fa fa-pencil" data-bind="click: $root.editItem.bind($root), visible: !$root.isItemEditing($data)"></i>
                                     <i class="fa fa-check" data-bind="click: $root.applyItem.bind($root), visible: $root.isItemEditing($data)"></i>

                                 </h1>

                                <p>Nombre del lider</p>
                            </div>
                            <ul class="nav nav-pills nav-stacked">
                                <li><a href="javascript:;"> <i class="fa fa-envelope-o"></i> Mail Inbox <span class="badge label-success pull-right r-activity">10</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-tasks"></i> Recent Activity <span class="badge label-danger pull-right r-activity">15</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-bell-o"></i> Notification <span class="badge label-success pull-right r-activity">11</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-comments-o"></i> Message <span class="badge label-warning pull-right r-activity">03</span></a>

                                </li>
                            </ul>
                        </section>
                    </aside>
                </div>

辅助脚本

            ko.observable.fn.beginEdit = (transaction) ->
                self = this
                commitSubscription
                rollbackSubscription

                #Get the current value and store it for editing
                if(self.slice)
                    self.editValue = ko.observableArray(self.slice())
                 else
                     self.editValue = ko.observable(self())

                self.dispose = () ->         
                    #kill this subscriptions
                    commitSubscription.dispose()
                    rollbackSubscription.dispose()

                self.commit =  () ->
                    # update the actual value with the edit value
                    self(self.editValue())

                    #dispose the subscriptions
                    self.dispose();


                self.rollback =  () ->
                    #rollback the edit value
                    self.editValue(self());

                    #dispose the subscriptions
                    self.dispose();

                #subscribe to the transation commit and reject calls
                commitSubscription = transaction.subscribe(self.commit, self, "commit");

                rollbackSubscription = transaction.subscribe(self.rollback, self, "rollback");

                return self;

            class Team
                constructor : (name) ->
                    @id = ko.observable(null)
                    @name = ko.observable(name)
                    @students = ko.observableArray([])
                    @activityGroup = ko.observableArray([])
                    @delivery = ko.observableArray([])
                reset : () ->
                    @id(null)
                    @name(null)
                    @students(null)
                    @activityGroup(null)
                    @delivery(null)
                beginEdit : (transaction) ->
                    @name.beginEdit(transaction)

            class TeamViewModel
                constructor : () ->
                    @teams = ko.observableArray([])
                    @editingItem = ko.observable()

                    #create the transaction for commit and reject
                    @editTransaction = new ko.subscribable()

                isItemEditing : (item) ->
                        return item == @editingItem()

                editItem : (item) ->
                    if ( @editingItem() == null) 
                         console.log("Entra")
                        #start the transaction
                        item.beginEdit(@editTransaction)

                        #shows the edit fields
                        @editingItem(item)

                applyItem : (item) ->
                    #commit the edit transaction
                    @editTransaction.notifySubscribers(null, "commit")

                    #hides the edit fields
                    @editingItem(null)

                cancelEdit : (item) ->
                    #reject the edit transaction
                    @editTransaction.notifySubscribers(null, "rollback")

                    #hides the edit fields
                    @editingItem(null)



            $(document).ready(() ->
                model = new  TeamViewModel()
                initData = [
                    new Team("Team Name")            
                ]
                model.teams(initData)
                ko.applyBindings( model );
            );

<div data-bind="foreach: teams">
                    <aside class="profile-nav alt">
                        <section class="panel">
                            <div class="user-heading alt gray-bg"> <a href="#">
                                 <img src="images/lock_thumb.jpg" alt="" />
                             </a>

                                 <h1>
                                     <span data-bind="text: name, visible: !$root.isItemEditing($data)"></span>
                                     <input type="text"  data-bind="value: name.editValue, visible: $root.isItemEditing($data)"  />
                                     <i class="fa fa-pencil" data-bind="click: $root.editItem.bind($root), visible: !$root.isItemEditing($data)"></i>
                                     <i class="fa fa-check" data-bind="click: $root.applyItem.bind($root), visible: $root.isItemEditing($data)"></i>

                                 </h1>

                                <p>Nombre del lider</p>
                            </div>
                            <ul class="nav nav-pills nav-stacked">
                                <li><a href="javascript:;"> <i class="fa fa-envelope-o"></i> Mail Inbox <span class="badge label-success pull-right r-activity">10</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-tasks"></i> Recent Activity <span class="badge label-danger pull-right r-activity">15</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-bell-o"></i> Notification <span class="badge label-success pull-right r-activity">11</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-comments-o"></i> Message <span class="badge label-warning pull-right r-activity">03</span></a>

                                </li>
                            </ul>
                        </section>
                    </aside>
                </div>

HTML

<div data-bind="foreach: teams">
                    <aside class="profile-nav alt">
                        <section class="panel">
                            <div class="user-heading alt gray-bg"> <a href="#">
                                 <img src="images/lock_thumb.jpg" alt="" />
                             </a>

                                 <h1>
                                     <span data-bind="text: name, visible: !$root.isItemEditing($data)"></span>
                                     <input type="text"  data-bind="value: name.editValue, visible: $root.isItemEditing($data)"  />
                                     <i class="fa fa-pencil" data-bind="click: $root.editItem.bind($root), visible: !$root.isItemEditing($data)"></i>
                                     <i class="fa fa-check" data-bind="click: $root.applyItem.bind($root), visible: $root.isItemEditing($data)"></i>

                                 </h1>

                                <p>Nombre del lider</p>
                            </div>
                            <ul class="nav nav-pills nav-stacked">
                                <li><a href="javascript:;"> <i class="fa fa-envelope-o"></i> Mail Inbox <span class="badge label-success pull-right r-activity">10</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-tasks"></i> Recent Activity <span class="badge label-danger pull-right r-activity">15</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-bell-o"></i> Notification <span class="badge label-success pull-right r-activity">11</span></a>

                                </li>
                                <li><a href="javascript:;"> <i class="fa fa-comments-o"></i> Message <span class="badge label-warning pull-right r-activity">03</span></a>

                                </li>
                            </ul>
                        </section>
                    </aside>
                </div>

---

我用javascript创建了一个新版本