Question

我基于这个例子开始使用knockout创建和编辑表格：

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

我使用coffeescript重写它只是为了可读性porpuse。这是我的版本。

但是，当您单击铅笔以编辑单元格时，第一次初始化表时输入文本只显示没有值且空输入。

输入值并单击检查后，每当您尝试编辑单元格时，它都会在文本输入中显示正确的编辑值。

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

注意： beginEdit函数第一次设置self.EditValue，因此输入文本中的绑定已经存在第一次加载时，它也存在单击检查时的值，因为它调用更新函数，使用property.editValue更新值并且该值不是空白，只是看起来淘汰不会显示该值，因为它会退出。

Coffescript

            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 );
            );

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>

Knockout值绑定未正确更新

0 个答案: