liaison mvvm kendo dans un modèle

J'essaye de lier mvvm de kendo dans un modèle. Les variables de modèle fonctionnent mais aucune des choses MVVM n'est.liaison mvvm kendo dans un modèle

<div id="list"></div> 

<script id="template" type="text/x-kendo-template"> 
    <div> 
    <button data-bind="visible: alreadyAttending, click: onClick"> 
     Your id is ${ID} 
    </button> 
    </div> 
</script> 

var data = []; 
data[0] = { alreadyAttending: true, ID: 1, onClick: function() { alert("Click 1"); }}; 
data[1] = { alreadyAttending: false, ID: 2, onClick: function() { alert("Click 2"); }}; 

$("#list").kendoListView({ 
    dataSource: data, 
    template: kendo.template($("#template").html()) 
});

Fiddle ici: https://jsfiddle.net/q99ufo3c/5/

Vous pouvez voir les boutons sont remplacés par des valeurs du tableau de données, mais la visibilité et cliquez sur les événements ne sont pas câblés. Je ne suis pas sûr de ce qui me manque. Est-ce que quelqu'un sait si cela est pris en charge?

Source

2017-09-26 user2719430

vous mixez MVVM avec la syntaxe jquery. Vous avez besoin d'un modèle (observable en kendo) et lier un conteneur div à ce modèle. vous devez également spécifier le modèle dans votre liste div –

Vous devez définir un attribut de données à l'élément div afin que Kendo puisse le lier correctement à votre modèle View.

data-role="listview" - définit un composant listview;
data-template="yourtemplateid" - définit le modèle à utiliser; - définit les données
source du composant listview;

Dans le Javascript vous devez avoir un modèle qui représente votre objet qui sera dans la source de données de la vue de liste. J'ai créé un appelé vm et j'ai choisi d'utiliser la méthode d'extension ObservableObject car elle est utile lorsque vous voulez créer un objet avec des valeurs par défaut, telles que la méthode onClick.

Veuillez jeter un coup d'œil à l'extrait ci-dessous.

(function() { 
 
    var vm = kendo.data.ObservableObject.extend({ 
 
    init: function(values) { 
 
     var defaultValues = { 
 
     alreadyAttending: false, 
 
     ID: null 
 
     }; 
 
     kendo.data.ObservableObject.fn.init.call(this, $.extend({}, defaultValues, values)); 
 
    }, 
 
    onClick: function() { 
 
     alert(this.get("ID")); 
 
    } 
 
    }); 
 

 
    var source = [ 
 
    new vm({ 
 
     alreadyAttending: true, 
 
     ID: 1 
 
    }), 
 
    new vm({ 
 
     alreadyAttending: false, 
 
     ID: 2 
 
    }) 
 
    ]; 
 

 
    var mainViewModel = kendo.observable({ 
 
    dataSource: source 
 
    }); 
 

 
    kendo.bind($("#list"), mainViewModel); 
 
})();

<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="list" data-role="listview" data-template="template" data-bind="source: dataSource"></div> 
 
    <script id="template" type="text/x-kendo-template"> 
 
    <div> 
 
     <button data-bind="visible: alreadyAttending, click: onClick"> 
 
     \t Your id is #:ID# 
 
     \t </button> 
 
    </div> 
 
    </script> 
 
</body> 
 

 
</html>

Source

2017-09-27 23:53:29

liaison mvvm kendo dans un modèle

Répondre

Questions connexes