2016-03-31 3 views
-1

Ich möchte diesen Fehler loswerden, aber ich verwende derzeit KnockoutJS auf einem speziellen Block. Das Problem ist, dass, wenn ko für die Datenbindung lesen, mein ViewModel noch nicht erstellt wurde. Ich binde es, nachdem ko geladen ist. Hier ist meine HTML-Ansicht:KnockoutJS: Bindung nach dem Rendern anwenden Ursachen "xxx ist nicht definiert"

<!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='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'> 
    <link href='https://fonts.googleapis.com/css?family=Bitter' 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="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></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> 

Hier meine JS ist:

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(); 
+1

Wo ist der Code, der das Problem verursacht? Was ist "xxx"? Bitte erstellen Sie ein [minimales, vollständiges und überprüfbares Beispiel] (http://stackoverflow.com/help/mcve). –

+0

Es tut mir leid, ich habe keine Ahnung, wie ich das besser sagen kann. Ich habe nur eine normale HTML-Seite und im unteren Teil, ich knockout und meine ViewModel. – Despirithium

+0

Wir müssen etwas ** Code ** sehen. Bearbeiten Sie Ihre Frage, um den entsprechenden Code und die genaue Fehlermeldung einzubinden, sonst kann niemand Ihnen helfen. "xxx ist nicht definiert" kann aus einer Million Gründen passieren, die mir einfallen, und ich bin mir sicher, dass es eine Million mehr gibt. –

Antwort

0

finde ich heraus, dass ich eine andere VM auf ein unexisting DOM-Element wurde verbindlich. Es sieht so aus, als ob es auf das gesamte Dokument angewendet wurde.

Verwandte Themen