locked
Помощь с split.js RRS feed

  • Вопрос

  • Осваиваю создание приложения на JS для windows 8 и нужно сделать функцию full view ,чтобы вся статья отображалась (3 яя часть изучения )

    Написано:

    За пределами функции selectionChanged добавьте функцию обработчика событий после объявления переменной post. Этот обработчик вызывается, когда пользователь нажимает кнопку Full View (Во весь экран). Функция WinJS.Navigation.navigate загружает страницу сведений об элементе и передает в качестве элемента выбранную запись блога.


    function displayFullView() {
        // Display the selected item in the item detail page
        nav.navigate('/pages/itemDetail/itemDetail.html', { item: post });
    }
    
    

    Добавьте следующий код в функцию ready сразу после кода, который был добавлен для отображения кнопки Full View (Во весь экран). Этот код регистрирует функцию displayFullView в качестве обработчика события click для кнопки Full View (Во весь экран).


    // Register the event handler for the Full View button
    document.getElementById('view').addEventListener("click", displayFullView, false);
    

    И как только я добавляю параметры сразу куча ошибок выводится, и требует удалить переменные () и так далее
    Куда именно надо ставить первый код 

    я ставил перед и после selectionChanged

    или если кто может скинуть готовый split.js готовый из Split шаблона


    • Изменено GeorgyXX 14 июня 2012 г. 19:35
    • Перемещено Abolmasov Dmitry 20 июня 2012 г. 11:39 (От:Языки программирования)
    • Перемещено Yubo. Zhang 14 сентября 2012 г. 9:13 (От:Приложения Windows в стиле Metro)
    14 июня 2012 г. 19:32

Ответы

  • Привет. Попробуйте вставить функцию function displayFullView() после объявляения переменной post, т.е. после

      var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
        var binding = WinJS.Binding;
        var nav = WinJS.Navigation;
        var ui = WinJS.UI;
        var utils = WinJS.Utilities;
        // The selected item
        var post;


    Для связи [mail]

    • Помечено в качестве ответа Abolmasov Dmitry 27 июня 2012 г. 12:05
    20 июня 2012 г. 11:38

Все ответы

  • (function () {
        "use strict";
    
        var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
        var binding = WinJS.Binding;
        var nav = WinJS.Navigation;
        var ui = WinJS.UI;
        var utils = WinJS.Utilities;
        // The selected item
        var post;
    
        ui.Pages.define("/pages/split/split.html", {
    
            /// <field type="WinJS.Binding.List" />
            items: null,
            /// <field type="Object" />
            group: null,
            itemSelectionIndex: -1,
    
            // This function checks if the list and details columns should be displayed
            // on separate pages instead of side-by-side.
            isSingleColumn: function () {
                var viewState = Windows.UI.ViewManagement.ApplicationView.value;
                return (viewState === appViewState.snapped || viewState === appViewState.fullScreenPortrait);
            },
    
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                var listView = element.querySelector(".itemlist").winControl;
                
                // Display the appbar and show the Full View button
                var appbar = document.getElementById('appbar');
                var appbarCtrl = appbar.winControl;
                appbarCtrl.showCommands(["view"], false);
                           
                // Register the event handler for the Full View button
                document.getElementById('view').addEventListener("click", displayFullView, false);
    
    
                // Store information about the group and selection that this page will
                // display.
                this.group = (options && options.groupKey) ? Data.resolveGroupReference(options.groupKey) : Data.groups.getAt(0);
                this.items = Data.getItemsFromGroup(this.group);
                this.itemSelectionIndex = (options && "selectedIndex" in options) ? options.selectedIndex : -1;
    
                // Get the first item, which is the default selection
                post = this.items.getAt(0);
    
                element.querySelector("header[role=banner] .pagetitle").textContent = this.group.title;
    
                // Set up the ListView.
                listView.itemDataSource = this.items.dataSource;
                listView.itemTemplate = element.querySelector(".itemtemplate");
                listView.onselectionchanged = this.selectionChanged.bind(this);
                listView.layout = new ui.ListLayout();
    
                this.updateVisibility();
                if (this.isSingleColumn()) {
                    if (this.itemSelectionIndex >= 0) {
                        // For single-column detail view, load the article.
                        binding.processAll(element.querySelector(".articlesection"), this.items.getAt(this.itemSelectionIndex));
                    }
                } else {
                    if (nav.canGoBack && nav.history.backStack[nav.history.backStack.length - 1].location === "/pages/split/split.html") {
                        // Clean up the backstack to handle a user snapping, navigating
                        // away, unsnapping, and then returning to this page.
                        nav.history.backStack.pop();
                    }
                    // If this page has a selectionIndex, make that selection
                    // appear in the ListView.
                    listView.selection.set(Math.max(this.itemSelectionIndex, 0));
                }
            },
    
           
    
    
    
            
         //
            selectionChanged: function (args) {
                var listView = document.body.querySelector(".itemlist").winControl;
                var details;
                var that = this;
                // By default, the selection is restriced to a single item.
                listView.selection.getItems().done(function updateDetails(items) {
                    if (items.length > 0) {
                        that.itemSelectionIndex = items[0].index;
                        if (that.isSingleColumn()) {
    
                            
                            // Get the item selected by the user
                            post = that.items.getAt(that.itemSelectionIndex);
    
                            // If snapped or portrait, navigate to a new page containing the
                            // selected item's details.
                            nav.navigate("/pages/split/split.html", { groupKey: that.group.key, selectedIndex: that.itemSelectionIndex });
                        } else {
                            // If fullscreen or filled, update the details column with new data.
                            details = document.querySelector(".articlesection");
                            binding.processAll(details, items[0].data);
                            details.scrollTop = 0;
                      }
                    }
                });
               
    
    
    
            },
    
                unload: function () {
                this.items.dispose();
            },
                        
            
            // This function updates the page layout in response to viewState changes.
            updateLayout: function (element, viewState, lastViewState) {
                /// <param name="element" domElement="true" />
                /// <param name="viewState" value="Windows.UI.ViewManagement.ApplicationViewState" />
                /// <param name="lastViewState" value="Windows.UI.ViewManagement.ApplicationViewState" />
    
                var listView = element.querySelector(".itemlist").winControl;
                var firstVisible = listView.indexOfFirstVisible;
                this.updateVisibility();
    
                var handler = function (e) {
                    listView.removeEventListener("contentanimating", handler, false);
                    e.preventDefault();
                }
    
                if (this.isSingleColumn()) {
                    listView.selection.clear();
                    if (this.itemSelectionIndex >= 0) {
                        // If the app has snapped into a single-column detail view,
                        // add the single-column list view to the backstack.
                        nav.history.current.state = {
                            groupKey: this.group.key,
                            selectedIndex: this.itemSelectionIndex
                        };
                        nav.history.backStack.push({
                            location: "/pages/split/split.html",
                            state: { groupKey: this.group.key }
                        });
                        element.querySelector(".articlesection").focus();
                    } else {
                        listView.addEventListener("contentanimating", handler, false);
                        listView.indexOfFirstVisible = firstVisible;
                        listView.forceLayout();
                    }
                } else {
                    // If the app has unsnapped into the two-column view, remove any
                    // splitPage instances that got added to the backstack.
                    if (nav.canGoBack && nav.history.backStack[nav.history.backStack.length - 1].location === "/pages/split/split.html") {
                        nav.history.backStack.pop();
                    }
                    if (viewState !== lastViewState) {
                        listView.addEventListener("contentanimating", handler, false);
                        listView.indexOfFirstVisible = firstVisible;
                        listView.forceLayout();
                    }
    
                    listView.selection.set(this.itemSelectionIndex >= 0 ? this.itemSelectionIndex : Math.max(firstVisible, 0));
                }
            },
    
            // This function toggles visibility of the two columns based on the current
    
    
    
    
    
              // view state and item selection.
            updateVisibility: function () {
                var oldPrimary = document.querySelector(".primarycolumn");
                if (oldPrimary) {
                    utils.removeClass(oldPrimary, "primarycolumn");
                }
                if (this.isSingleColumn()) {
                    if (this.itemSelectionIndex >= 0) {
                        utils.addClass(document.querySelector(".articlesection"), "primarycolumn");
                        document.querySelector(".articlesection").focus();
                    } else {
                        utils.addClass(document.querySelector(".itemlistsection"), "primarycolumn");
                        document.querySelector(".itemlist").focus();
                    }
                } else {
                    document.querySelector(".itemlist").focus();
                }
            }
        });
    })();
    

    а вот весь код
    14 июня 2012 г. 19:36
  • Привет. Попробуйте вставить функцию function displayFullView() после объявляения переменной post, т.е. после

      var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
        var binding = WinJS.Binding;
        var nav = WinJS.Navigation;
        var ui = WinJS.UI;
        var utils = WinJS.Utilities;
        // The selected item
        var post;


    Для связи [mail]

    • Помечено в качестве ответа Abolmasov Dmitry 27 июня 2012 г. 12:05
    20 июня 2012 г. 11:38