Question

我有一个应用程序以分页方式检索数据库中的用户列表。第一页显示前6个用户，当我点击我的分页中的下一页时，我会得到接下来的6个用户。我得到了第一个包含6个用户的列表，但问题是在检索下一个6并应用绑定后，它在View上没有变化，我确信它会检索下一个6，因为我控制台记录了它。这是代码

this.get("#/search/query::username", function (context) {

        var searchKeyWord = this.params['username'];


        $.ajax({
            url: "http://localhost:8080/dashboard/search/" + this.params['username'] + "/0",
            type: 'GET',
            contentType:'application/json',
            dataType: 'json',
            success: function(data) {
                context.app.swap('');
                context.load('partials/search.html')
                    .appendTo(context.$element())
                    .then(function (content) {

                        console.log(data);
                        ko.applyBindings(searchModel(data),document.getElementById('search'));
                        initCard();
                        genericFunctions();

                        $('.searchPage').twbsPagination({
                            totalPages: data.totalPages,
                            visiblePages: 5,
                            onPageClick: function (event, page) {

                                $.get("http://localhost:8080/dashboard/search/" + searchKeyWord + "/" + (page - 1), function(data, status){


              searchModel(data);

                                });
                            }
                        });
                    });
            }
        });

    });

这是searchmodel：

function searchModel(data) {

var SearchResult = ko.mapping.fromJS(data);

SearchResult.groupedUsers = ko.computed(function() {

    var rows = [];

    SearchResult.content().forEach(function(user, i) {
        // whenever i = 0, 3, 6 etc, we need to initialize the inner array
        if (i % 3 == 0)
            rows[i/3] = [];

        rows[Math.floor(i/3)][i % 3] = user;
    });

    console.log(rows);

    return rows;
});



return SearchResult;

}

这是html：

 <div id="users-tab" class="tab-pane fade in active" data-bind="foreach: groupedUsers">

                      <ul class="search-results files row" data-bind="foreach: $data">

                        <li class="search-result form-group col-sm-4 ">
                          <div class="media cover ">
                            <a href="#" class="pull-left">
                              <img alt="" src="assets/images/ici-avatar.jpg" class="media-object img-circle">
                            </a>
                            <div class="media-body">
                              <h4><a href="#" data-bind="text: userName">Ing. Imrich Kamarel</a></h4>
                              <small>First name: <span data-bind="text: firstName"></span></small><br>
                              <small>Last name: <span data-bind="text: lastName"></span></small><br>
                            </div>
                          </div>
                        </li>

                      </ul>


                    </div>
                    <!-- / Tab panes -->

                    <nav aria-label="Page navigation">
                      <ul class="searchPage" id="pagination"></ul>
                    </nav>

Answer 1

我真的没有给你一个解决方案，但这就是我如何处理这种情况：

伪代码视图模型传入：

var searchViewModel = function(){
    var self = this;
    self.usersOnScreen = ko.observableArray();

    function exampleAjaxCall(){
        $.ajax({
        type: "GET",
        url: 'yourcontroller/youraction',
        contentType: "application/json",
        success: function (data) {
             //add data to self.usersOnScreen() using mapping or in a loop
             }    
        });
    }
    self.pagination = function(){
    // place another ajax call here which handles the paging and map the response to self.usersOnScreen();
    }
    self.init = function(){
    // place your ajax call here and map the response to self.usersOnScreen() 
    }
}

伪html和js传入：

<html>
<body>
    <ul data-bind="foreach: usersOnPage">
        <li>
        //Your user data here
        </li>
    </ul>
<script type="text/javascript">
//insert ref to your viewmodel
var vm = new SearchViewModel();
vm.init();
ko.applyBinding(vm);
</script>
</body>
</html>

这样你就不需要计算了，我认为代码读起来更“容易”。我希望这对你有所帮助。

KnockoutJs：我的计算函数不是动态更改视图中的元素

1 个答案: