JS导航Appbar按钮与网格模板 [英] JS Navigation Appbar Buttons with Grid Template

问题描述

我之前已经问过这个问题，但是无法让javascript部分在我从标准VS模板创建的Grid应用程序上正常工作（请参阅javascript中的上一页和下一章appbar按钮）。 / p>

就像现在一样，按钮只导航到我的数据的开头，无论我的位置如何，这都是第1册第1章 - 第5章第6章。

简单来说，代码应该能够识别用户所在的书和章节，并在他们点击appbar按钮时继续下一章或上一章。

我使用的代码的基础知识如下。忽略丢失的部分，因为我已经点击appbar按钮进行响应。他们只是没有导航到正确的位置。

 
（function（）{ 
    [使用严格英寸; 
 
    WinJS.Namespace.define（QUOT; SelfNavPageUtils" ;, 
  &NBSP ;     {
           日志：函数（MSG）{
 &NBSP ;              MSApp.execUnsafeLocalFunction（函数（）{
&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP ;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;的document.getElementById（ 'divMessage'）的innerHTML + = QUOT;。<峰; br />" + MSG; 
&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;}）; 
&NBSP;&NBSP;&NBSP;&NBSP ;       } 
       } 
   ）; 
 
 
 
  WinJS  。  UI  。 页面 。 定义 <跨度类= "双关语">（ <跨度类= "STR">" /pages/itemDetail/itemDetail.html"  <跨度类= "双关语">     {  
 
 currentIndex  ：  1  ，  
 
 
   //每当用户导航到此页面时，都会调用此函数。它  
   //使用应用程序的数据填充页面元素。  
 ready  ：    function  < span class ="pln">  （  element  ， 选项 ）    {  
   // TODO：在此处初始化页面。  
 
 
  此 。  currentIndex   =    （  options  &&   options  。  index  ）   ？ 选项 。 索引 ：    1  ;   
   SelfNavPageUtils  。  log  （ " Current Index："     +    此 。  currentIndex  ）;   
 
  此 。  onPageLoad  （）;   
 
   WinJS  。 实用程序 。  quer y  （ 'a' ）。  listen  （ " click"  ，   功能   （  evtInfo  ）    {  
 evtInfo  。  preventDefault  （）;   
 
   WinJS  。 导航 。 导航 （  evtInfo  。  target  。  href  ）;   
  }）;   
   }，  
 
卸载 ：   功能   （）    {  
  此 。  onPageUnload  （）;   
  }，  
 
 
 onPageLoad  ：  功能   （）    {  
 
 document  。  getElementById  （ 'prevChapter  ）。  addEventListener  （ "点击" ，   此 。  navigateToSelf  。  bind  （ 此 ））;   
文件 。  getElementById  （ 'nextChapter' ）。  addEventListener  （ " click"  ，   此 。  navigateToSelf  。  bind  （  this  ））;   
  }，  
 
 onPageUnload  <跨度类= "双关语">： <跨度类= "PLN">  <跨度类= "KWD" > function    （）    {  
 document  。  getElementById  （ 'prevChapter' ）。  removeEventListener  （ " click"  ，   此 。  navigateToSelf  。  bind  （ 此 ））;   
 document  。  getElementById  （ ' nextChapter' ）。  removeEventListener  （ "点击" ，   此 。  navigateToSelf  。  bind  （  this  ））;   
  }，  
 
 navigateToSelf  ：   功能   （）{  
 
   var   btn   =    事件 。  srcElement  ;   
 
 
  如果   （  btn  。  id    'prevChapter' ）    {  
 
  如果 （ 此 。  currentIndex  < =   1  ）   返回 ;   
 
   WinJS  。 导航 。 导航 （  
  <跨度类= "STR">"  /pages/itemDetail/itemDetail.html <跨度类= "STR">"  <跨度类= "双关语"> ，  
   {  
 index  ：    this  。  currentIndex    -    1   
  }   
  ）;   
  }     else     {  
 
  < span class ="typ"> WinJS  。 导航 。 导航 （  
  "  / pages / itemDetail /itemDetail.html"  ，  
   {  
 index  ：   此 。  currentIndex   +   1   
  }   
  ）;   
   }   
 
  }   
  }）;   
  }）（）;  
 

解决方案

更改准备活动中的以下代码行...

FROM：

 this.currentIndex =（options&& options.index）？ options.index：1; 

TO：

 this.currentIndex =（options&& options。指数）|| 1; 

I have previously asked this question but have not been able to get the javascript portion to work properly on my Grid app created from the standard VS template (see trying for previous and next chapter appbar buttons in javascript).

As it is now, the buttons only navigate to the beginning of my data, which would be book 1 chapter 1 regardless of my position–say book 5 chapter 6.

In plain terms, the code should be able to recognize what book and chapter the user is on and proceed to the next chapter or previous chapter when they hit the appbar buttons.

The basics of the code I used are below. Ignore the missing portions as I have gotten the appbar buttons to respond when clicked. They just do not navigate to the correct locations.

(function () {
    "use strict";

    WinJS.Namespace.define("SelfNavPageUtils",
        {
            log: function (msg) {
                MSApp.execUnsafeLocalFunction(function () {
                    document.getElementById('divMessage').innerHTML += "<br/>" + msg;
                });
            }
        }
    );
WinJS.UI.Pages.define("/pages/itemDetail/itemDetail.html", {

        currentIndex:1,


        // 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) {
            // TODO: Initialize the page here.


            this.currentIndex = (options && options.index) ? options.index : 1;
            SelfNavPageUtils.log("Current Index: " + this.currentIndex);

            this.onPageLoad();

            WinJS.Utilities.query('a').listen("click", function (evtInfo) {
                evtInfo.preventDefault();

                WinJS.Navigation.navigate(evtInfo.target.href);
            });
        },

        unload: function () {
            this.onPageUnload();
        },


        onPageLoad:function () {

            document.getElementById('prevChapter').addEventListener("click", this.navigateToSelf.bind(this));
            document.getElementById('nextChapter').addEventListener("click", this.navigateToSelf.bind(this));
        },

        onPageUnload: function () {
            document.getElementById('prevChapter').removeEventListener("click", this.navigateToSelf.bind(this));
            document.getElementById('nextChapter').removeEventListener("click", this.navigateToSelf.bind(this));
        },

        navigateToSelf: function (){

            var btn = event.srcElement;

     
            if (btn.id === 'prevChapter') {

                if(this.currentIndex<=1) return;

                WinJS.Navigation.navigate(
                    "/pages/itemDetail/itemDetail.html",
                    {
                        index: this.currentIndex-1
                    }
                );
            } else {

                WinJS.Navigation.navigate(
                    "/pages/itemDetail/itemDetail.html",
                    {
                        index: this.currentIndex +1
                    }
                );
            }

        }
    });
})();

解决方案

Change the following line of code in your ready event...

FROM:

this.currentIndex = (options && options.index) ? options.index : 1;

TO:

this.currentIndex = (options && options.index) || 1;

这篇关于JS导航Appbar按钮与网格模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！