javascript - 淘汰js插入额外的空元素

Question

我有一个我绑定到 ul > 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>       

这是我的视图模型

 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>