Kendo MVVM-使用数据显示绑定布局

Posted 2023-05-07

【中文标题】Kendo MVVM-使用数据显示绑定布局

【英文标题】：Kendo MVVM- using data-show to bind a layout

【发布时间】：2014-10-06 00:09:08

【问题描述】：

我正在使用带有 JQuery 的 Kendo UI 来使用 Telerik appBuilder 创建一个跨平台的移动应用程序。

我的问题是关于剑道的可能性。在单独的 html 文件中，我有一个布局定义和加载布局的视图。在视图中，我试图让我们 data-show 调用一个函数，该函数将视图链接到的 ViewModel 中的布局绑定到此博客文章中：http://codingwithspike.wordpress.com/2012/12/31/kendo-mobile-gotchas-tips-tricks/

我的问题是：我可以在 View Model 中使用 show 功能，还是必须将 show 功能放在 View Model 之外。无论哪种方式，到目前为止我都未能成功调用该函数。并绑定模型

我正在尝试在布局的页脚中使用该功能，但在将布局绑定到视图模型时遇到问题。

我将包含所涉及的代码，希望能解决任何问题。

这是我的 index.html 文件中的布局

<div data-role="layout" data-id="live-album-layout">
    <header data-role="header">
       <div data-role="navbar">
        <a data-role="backbutton" data-align="left">Back</a>
            <span data-role="view-title"></span>
            <a data-role="button" data-align="right" data-icon="home" href="views/home.html"></a>
        </div>
    </header>
    <footer data-role="footer">
        <div data-role="navbar">
            <a id="capture-button" data-role="button" data-bind="click: capturePhoto" data-align="left">Take Picture</a>
            <a id="get-photo-button" data-role="button" data-bind="click: getPhoto" data-align="right">Add From Library</a>
        </div>
    </footer>
</div>

接下来是我尝试将数据绑定连接到的视图

<div id="livealbumView" data-role="view" data-layout="live-album-layout" 
data-title="Live Album" data-model="app.liveAlbum.viewModel"
data-stretch="true" data-show="app.LiveAlbum._loadLayoutMVVM">
    <div id="album-scroll-view" data-role="scrollview" data-items-per-page="4"
        data-content- data-enable-pager="true"
        data-bind="source: galleryDataSource" data-template="scrollview-gallery-template">
    </div>

视图的模板在这个问题中并不重要。我知道它可以工作，而且一旦我解决了这个问题，我还有很多事情要做。

现在，视图模型的 javascript

(function(global) 
var app = global.app = global.app || ;

var LiveAlbum = kendo.observable(
    currentId: 0,


    _loadLayoutMVVM: function() 
        alert("bound");
        kendo.bind($("#live-album-layout"), this);
    ,


    onPhotoURISuccess: function(imageURI) 
        setTimeout( function() 
        LiveAlbum.addPicture(imageURI);
       , 0);
    ,
    capturePhoto: function() 
        // Take picture using device camera and retrieve image as base64-encoded string
        navigator.camera.getPicture(LiveAlbum.onPhotoURISuccess, LiveAlbum.onFail,  quality: 45,
            destinationType: Camera.DestinationType.FILE_URI,
            saveToPhotoAlbum:true);
    ,
    getPhoto: function() 
        // Retrieve image file location from specified source
        navigator.camera.getPicture(LiveAlbum.onPhotoURISuccess, LiveAlbum.onFail,  quality: 45, 
            destinationType: Camera.DestinationType.FILE_URI,
            sourceType: Camera.PictureSourceType.PHOTOLIBRARY );
    ,
    onFail: function(message) 
        if (message !== "no image selected") 
        setTimeout(function() 
            alert('Failed because ' + message);
        , 0);
            
    ,
    galleryDataSource: new kendo.data.DataSource(
         type: "odata",
            transport: 
                read: 
                    url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                
            ,
            serverPaging: true,
            pageSize: 30
    ),

    //change this function for uploading to the server
    addPicture: function(src) 
        this.currentId++;
        this.galleryDataSource.add(
            id: this.currentId,
            image_url:src
        )
        this.galleryDataSource.sync();
    
);

app.liveAlbum = 
    viewModel: LiveAlbum
;

（窗口））

app.js 只是为了澄清

(function(global) 
var app = global.app = global.app || ;

document.addEventListener("deviceready", function() 
    app.application = new kendo.mobile.Application(document.body, 
        initial: "views/home.html",
        skin: "flat",
        transition: "slide"
    , false);  
);

)(窗口);

抱歉，“（窗口）；”显然不配合 *** 的格式。

任何帮助都可以找出剑道的限制，甚至破解解决方案都会有所帮助。

【参考方案1】：

从此代码：

var app = global.app = global.app || ;

var LiveAlbum = kendo.observable(
    _loadLayoutMVVM: function()  ... 
);

app.liveAlbum = 
    viewModel: LiveAlbum
;

看起来您的函数将位于：

app.liveAlbum.viewModel._loadLayoutMVVM

但您的 HTML 包含：

data-show="app.LiveAlbum._loadLayoutMVVM"

---

同样在您的_loadLayoutMVVM 函数中，您正在使用一个按元素 ID 的 jQuery 选择器来定位您的布局：

$("#live-album-layout")

但实际的布局元素没有（也不应该有）ID。不过它确实有一个data-id，所以你可以使用选择器：

$("[data-id='live-album-layout']")

---

您还应该确保只在第一次调用视图的show 事件时才调用kendo.bind()，而不是每次都调用，否则绑定会重复并导致其他奇怪的更新和性能问题。在第一次调用kendo.bind() 之后，通常可以通过将布尔变量设置为true 来执行此操作，如果变量为true，则不要再次调用它

---

希望对您有所帮助，感谢您阅读我的博客！

【讨论】：

您的博客在理解 Kendo 方面帮助了我很多，甚至超过了他们的演示和 API 参考。我希望我在开始深入研究他们的资源并搞砸了很多，重写多次，并且几次感到非常沮丧之前已经阅读了它。