I want to get rid of that error but i'm currently using KnockoutJS on a special block. The problem is that when ko read for the data-bind, my ViewModel isn't created yet. I bind it after ko is loaded. Here is my HTML view :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}{% endblock %} - Evosphere</title>
<link rel="icon" type="image/x-icon" href="{{ asset('design/img/icons/favicon.png') }}" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href='http://ift.tt/1ZO5WKc' rel='stylesheet' type='text/css'>
<link href='http://ift.tt/1RZWnau' rel='stylesheet' type='text/css'>
<link href='{{ asset("design/css/resp_lg.css") }}' media="screen and (max-width: 1550px)" rel='stylesheet' type='text/css'>
<link href='{{ asset("design/css/resp_md.css") }}' media="screen and (max-width: 1350px)" rel='stylesheet' type='text/css'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
{% javascripts
'js/libs/*.js'
'js/Evo/BeforeInit/*/*.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
</head>
<body>
<nav class="navbar-top">
</nav>
<div data-knockout="messenger-block">
<div id="messenger-attachment-container" class="container-messenger">
<div data-bind="foreach: conversations">
Ohoh
</div>
</div>
<div id="messenger-dialog-container" class="container-messenger-bottom">
</div>
</div>
<div class="main">
{% block body %}
{% endblock %}
</div>
<script src="http://ift.tt/1ZO5YSj"></script>
{% javascripts
'js/Evo/app.js'
'js/Evo/*/*.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{{ include('AppBundle:Javascript:init.js.html.twig') }}
{% javascripts
'js/Evo/RequireInit/Utility/*.js'
'js/Evo/RequireInit/Module/*/*.js'
'js/Evo/RequireInit/Module/bootstrap.js'
'js/Evo/RequireInit/Module/navigation.js'
'js/Evo/RequireInit/Module/feed.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% block javascripts %}
{% endblock %}
</body>
</html>
Here is my JS :
function ConversationDialogViewModel(){
var self = this;
this.conversations = [1, 2, 3];
}
var $messegnerBlockKnockout = $('[data-knockout="messenger-block"]');
ko.cleanNode($messegnerBlockKnockout[0]);
ko.applyBindings(new ConversationDialogViewModel(), $messegnerBlockKnockout[0]);
$messegnerBlockKnockout.show();
Aucun commentaire:
Enregistrer un commentaire