jQuery UI Widgets › Forums › Layouts › Panel and Responsive Panel › Knockout + jqxPanel

Tagged: , , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  astat 11 years, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Knockout + jqxPanel Posts
  • December 11, 2012 at 3:09 pm Knockout + jqxPanel #12171

    astat
    Member

    Hello,

    I’m trying to create a jqxPanel containing some content bound with knockout.
    I’ve tried several solutions, and here is the one which looked the more logical to me, using autoUpdate.

    You can see that when we click on the panel, the data is added (as expected), but the scroll bar doesn’t manage to follow and crash.

    What should be the best way to do ? I’m willing to declare any complex binding method or whatever, but I need to update only my model using “UIObjectModel.messages.push”
    (i.e. I can not rely on direct UI invocation like :

    $('#jqxPanel').jqxPanel('append', $('#elementId')[0]);

    )

    Thanks a lot,
    Alban

    <!DOCTYPE html>
    <html>
    	<head>
    			<!-- jQuery  : Core js framework -->
    			<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    			
    			<!-- jQWidgets  : Widget library -->
    			<link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    			<link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.metro.css" type="text/css" />
    			<script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script>
    			<script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script>
    			<script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"></script>
    			<script type="text/javascript" src="jqwidgets/jqwidgets/jqxpanel.js"></script>
    			
    			<!-- Knockout : MVVM controller -->
    			<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js'></script>
    			
    			<script type="text/javascript">
    $(window).load(function(){
    	UIObjectModel = {
    		messages: ko.observableArray([
    			{name : "Foo", message :"Hello"},
    			{name : "Bar", message :"Hello"},
    			{name : "Foo", message :"Hello"},
    			{name : "Bar", message :"Hello"},
    			{name : "Foo", message :"Hello"},
    			{name : "Bar", message :"Hello"},
    			{name : "Foo", message :"Hello"},
    			{name : "Bar", message :"Hello"},
    			{name : "Foo", message :"Hello"},
    			{name : "Bar", message :"Hello"},
    			{name : "Foo", message :"Hello"},
    			{name : "Bar", message :"Hello"}
    		])
    	};
    	ko.applyBindings(UIObjectModel);
    	$("#msgs").jqxPanel({autoUpdate: true, height:"200px", width:"100px"});
    	$("#msgs").click(function(){
    		UIObjectModel.messages.push({name : "Me", message :"new message"});
    	});
    });
    			</script>
    	</head>
    	<body>
    		<div id="msgs" data-bind="foreach:messages">
    			<div class="entries">
    				<div class="name"><span data-bind="text:name"></span></div>
    				<div class="text"><span data-bind="text:message"></span></div>
    			</div>
    		</div>
    	</body>
    </html>
    December 13, 2012 at 6:45 am Knockout + jqxPanel #12281

    Dimitar
    Participant

    Hello Alban,

    The messages array should be bound to the div with class “entries”, rather than the one from which the panel is built (with id “msgs”), i.e.:

        <div id="msgs">
            <div class="entries" data-bind="foreach:messages">
                <div class="name">
                    <span data-bind="text:name"></span>
                </div>
                <div class="text">
                    <span data-bind="text:message"></span>
                </div>
            </div>
        </div>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    December 13, 2012 at 8:45 am Knockout + jqxPanel #12284

    astat
    Member

    The is working better 🙂

    Thanks,
    Alban

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.