admin管理员组

文章数量:1287646

I load page dynamically with jquery.load function and but loaded page not bind to viewModel?

app.js

function viewModel(){
    var self = this;
    self.users = ko.observable();

    Sammy(function() {
        this.get("#/users",function() {
            $.get("/api/users",function(data){
                self.users(data);
            });
            $("#content").load("pages/users.html");
        });
    }).run("#/");
}

ko.applyBindings(new viewModel());

index.html:

<html>
    <body>
        <div id="content"></div>
        <script src="statics/js/lib/jquery-1.8.2.js"></script>
        <script src="statics/js/lib/knockout-2.2.0.debug.js"></script>
        <script src="statics/js/lib/knockout.mapping.js"></script>
        <script src="statics/js/lib/sammy.js"></script>
        <script src="statics/js/lib/app.js"></script>
    </body>
</html>

pages/users.html

<ul data-bind="foreach: users">
    <li><span data-bind="text: fullName"></span></li>
</ul>

I load page dynamically with jquery.load function and but loaded page not bind to viewModel?

app.js

function viewModel(){
    var self = this;
    self.users = ko.observable();

    Sammy(function() {
        this.get("#/users",function() {
            $.get("/api/users",function(data){
                self.users(data);
            });
            $("#content").load("pages/users.html");
        });
    }).run("#/");
}

ko.applyBindings(new viewModel());

index.html:

<html>
    <body>
        <div id="content"></div>
        <script src="statics/js/lib/jquery-1.8.2.js"></script>
        <script src="statics/js/lib/knockout-2.2.0.debug.js"></script>
        <script src="statics/js/lib/knockout.mapping.js"></script>
        <script src="statics/js/lib/sammy.js"></script>
        <script src="statics/js/lib/app.js"></script>
    </body>
</html>

pages/users.html

<ul data-bind="foreach: users">
    <li><span data-bind="text: fullName"></span></li>
</ul>
  • javascript
  • jquery
  • knockout.js
Share Improve this question asked Nov 6, 2012 at 13:54 oguzh4noguzh4n 6821 gold badge10 silver badges30 bronze badges 5
  • That's because the JavaScript in your current page has run prior to loading the new content so the new content is not aware of the jQuery/JavaScript code. For jQuery have a look at the on() method api.jquery./on – Jay Blanchard Commented Nov 6, 2012 at 14:07
  • @JayBlanchard how jquery on() can help me? – oguzh4n Commented Nov 6, 2012 at 14:11
  • You need to go read the docs - it may not help you but it may point you in the right direction. If not you can start here: google./… – Jay Blanchard Commented Nov 6, 2012 at 14:14
  • 1 Doesn't the jQuery load function include a callback? Why not load the div html first and then set the KO bindings in the callback function? That way, you'll ensure that the html has been loaded first. – Trent Commented Nov 6, 2012 at 14:39
  • Look at the very last example here... api.jquery./load – Trent Commented Nov 6, 2012 at 14:42
Add a ment  | 

2 Answers 2

Reset to default 11 
$("#content").load("/pages/users.html", function () {
   ko.applyBindings(new viewModel());
}

should do it...

I resolved my problem re-apply binding after after dynamic page loading

function viewModel(){
    var self = this;
    self.users = ko.observable();

    Sammy(function() {
        this.get("#/users",function() {
            $.get("/api/users",function(data){
                self.users(data);
            });
            $("#content").load("pages/users.html", null, function (response, status, xhr) {
                if (status != "error") {
                } 
                    ko.applyBindings(self, $(".dynamic-page-content").get(0)); 
                }
            });
        });
    }).run("#/");
}

ko.applyBindings(new viewModel());

本文标签： javascriptHow to bind knockout viewmodel to dynamically load pageStack Overflow

版权声明：本文标题：javascript - How to bind knockout viewmodel to dynamically load page? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741314455a2371834.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。