jquery - Kendo MVVM - 使用 data-show 绑定(bind)布局

Question

我使用 Kendo UI 和 JQuery 来使用 Telerik appBuilder 创建跨平台移动应用程序。

我的问题是关于剑道的可能性。在单独的 HTML 文件中，我有一个布局定义和加载该布局的 View 。在 View 中，我尝试使用 data-show 调用一个函数，该函数绑定(bind) View 链接到的 ViewModel 中的布局，如本博客文章中所述:http://codingwithspike.wordpress.com/2012/12/31/kendo-mobile-gotchas-tips-tricks/

我的问题是:我可以在 View 模型中使用显示函数吗？还是必须将显示函数放在 View 模型之外。无论哪种方式，到目前为止我都没有成功调用该函数。并绑定(bind)模型

我尝试在布局的页脚中使用该函数，但在将布局绑定(bind)到 View 模型时遇到问题。

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

这是我的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>

接下来是我尝试将数据绑定(bind)连接到的 View

<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-height="100%" data-enable-pager="true"
        data-bind="source: galleryDataSource" data-template="scrollview-gallery-template">
    </div>

View 的模板在这个问题中并不重要。我知道它是有效的，而且一旦解决了这个问题，我就需要做很多改变。

现在， View 模型的 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);  
});

})(窗口);

抱歉，“(窗口)；”显然不配合 StackOverflow 的格式化。

任何帮助弄清楚剑道的局限性，甚至黑客解决方案都会有所帮助。

Answer 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']")

---

您还应该确保仅在第一次调用 View 的 show 事件时调用 kendo.bind()，而不是每次都调用，否则绑定(bind)将被获取重复并导致其他奇怪的更新和性能问题。通常，您可以通过在第一次调用 kendo.bind() 后将 bool 变量设置为 true 来实现此目的，然后如果该变量为真

---

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