Question

我有一个评论列表，我正在绑定到ul＆gt; li和出于某种原因，Knockout js为每个项目插入空白

以及绑定的li。

有人可以告诉我，我做错了会导致这种情况发生吗？只需要让额外的空li停止插入。我试过玩绑定，但我不知道是什么导致了这个。

<ul id="reviews-list" data-bind="foreach: reviews">
     <li data-bind="click:$parent.selectReview">
         <h1 data-bind="text: title"></h1>
        <p class="review-meta"><span data-bind="text: status, css: $data.status"></span><span class="pull-right" data-bind="text: date_published"></p>
    <li>
</ul>

这是我的ViewModel

 function Review(data) {
    this.id             = ko.observable(data.id);
    this.title          = ko.observable(data.title);
    this.content        = ko.observable(data.content);
    this.status         = ko.observable(data.status);
    this.featured       = ko.observable(data.featured);
    this.date_created   = ko.observable(data.date_created);
    this.date_published = ko.observable(data.date_published);
    this.last_updated   = ko.observable(data.last_updated); 
}

function ReviewsViewModel() {
    // data
    var self = this;
    self.reviews = ko.observableArray([]);
    self.selectedReview = ko.observable();

    // operations

    // load initial reviews from server
    $.getJSON('/admin/reviews/getreviews', {status : ''}, function(reviewsData) {
        var mappedReviews = $.map(reviewsData, function(review) {return new Review(review)});
        self.reviews(mappedReviews);        
    });

    self.filterReviews = function(status, label) {
        $.getJSON('/admin/reviews/getreviews', {status : status}, function(reviewsData) {
            var mappedReviews = $.map(reviewsData, function(review) {return new Review(review)});
            self.reviews(mappedReviews);
            var actionTitle = "";
            switch(status) {
                case '':
                    actionTitle = 'All Reviews';
                    break
                case 'published':
                    actionTitle = 'Published';
                    break;
                case 'draft':
                    actionTitle = 'Drafts';
                    break;
            }
            $(".action-title").html(actionTitle);
        });     
    }

    // apply css class based on the status
    self.statusCSS = function(value) {
        return value;
    }

    self.selectReview = function(r) {
        self.selectedReview(r);
        $("#review-editor").markdown({
            autofocus:false, 
            saveable:true, 
            hideable: false,
            onShow: function(e) {
                toggleEditorToolbar();
                e.showPreview();
                editor = e;
            }
        }); 
        //$("#reviews-list li").removeClass('active-review');
        $(this).addClass('active-review');          
        editMode();
        editMode();
    }
}

绑定中使用的示例JSON

[{"id":"1","title":"Danny Kane's Bishops & Barons nightclub on E. 14th St. recalls an era of bygone glamour","content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in dapibus turpis. Nulla posuere, ipsum ac fringilla pulvinar, sapien ipsum semper eros, eget tincidunt nisl orci ac nunc. Nulla iaculis sit amet tortor non laoreet. Nulla tincidunt augue auctor ante porttitor, eget porttitor lorem dignissim. Suspendisse adipiscing, ipsum nec vestibulum ultricies, enim ligula tempus augue, et scelerisque justo sapien vitae velit. Sed in rhoncus mauris. Sed condimentum libero ipsum, id elementum ligula molestie eget. Quisque et augue elit. Aliquam condimentum a enim ullamcorper porttitor. Morbi ullamcorper magna purus, vitae auctor ante varius ac. Morbi convallis nec lorem non feugiat. Proin interdum convallis elementum. Pellentesque ipsum neque, luctus et semper quis, mattis sed odio. Proin at orci ac quam adipiscing volutpat id ac diam.","featured":"0","date_created":"2013-11-06 22:50:02","date_published":"2012-05-13 00:00:00","last_updated":"2012-05-13 00:00:00","status":"published"},

Answer 1

我会编辑你的模型以强制使用正确的范围 -

function Review(data) {
    var self = this;
    self.id             = ko.observable(data.id);
    self.title          = ko.observable(data.title);
    self.content        = ko.observable(data.content);
    self.status         = ko.observable(data.status);
    self.featured       = ko.observable(data.featured);
    self.date_created   = ko.observable(data.date_created);
    self.date_published = ko.observable(data.date_published);
    self.last_updated   = ko.observable(data.last_updated); 
}

然后观察控制台以确保正在填充您期望的所有属性 -

离。 =

function Review(data) {
    var self = this;
    console.log(data.title);
    self .title          = ko.observable(data.title);
    console.log(self.title());
}

修改

您没有关闭LI标签

<li data-bind="click:$parent.selectReview"> <h1 data-bind="text: title"></h1> <p class="review-meta"><span data-bind="text: status, css: $data.status"></span><span class="pull-right" data-bind="text: date_published"></p> <li>

应该是

Answer 2

你的html搞砸了。试试这个（小提琴：http://jsfiddle.net/M2phC/3/）：

<ul id="reviews-list" data-bind="foreach: $data">
     <li>
         <h1 data-bind="text: title"></h1>
         <p class="review-meta"><span data-bind="text: status, css: $data.status"></span><span class="pull-right" data-bind="text: date_published"></span></p>
    </li>
</ul>

确切的原因是你最后到达某个<li>并且你应该有一个</li>

淘汰js插入额外的空元素

2 个答案: