javascript - Oracle jet 中的登录页面

Question

您好，我正在使用 Oracle JET 创建一个应用程序，在其中单击 LoginTest 页面中的 Login 按钮后，它应该在验证后将我带到主页。我已成功验证输入，但无法将其路由到主页。我尝试过使用多重绑定(bind)，但没有用。有人可以帮忙吗？

HTML 代码

h1>logintest</h1>
<div align="center">
<label for="username">Username</label>
<input id="username" type="text" required 
       data-bind="ojComponent: {component: 'ojInputText',
                                validators: [{type: 'regExp', options: {pattern: '[a-zA-Z0-9]{3,}',
                                messageDetail: 'You must enter at least 3 letters or numbers'}}],
                            invalidComponentTracker: tracker}" /><br /><br />
<label for="password">Password</label>
<input id="password" type="password" required
       data-bind="ojComponent: {component: 'ojInputPassword',
                                validators: [{type: 'regExp', options : {pattern: '(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{6,}',
                                messageSummary : '{label} too Weak',
                                messageDetail: 'The password must contain atleast one uppercase, one lowercase, one number and must be 6 digits long'}}],
                                invalidComponentTracker: tracker}" /><br /><br />
<a class="oj-button-primary oj-button-xl" 
   href="http://localhost:8383/Test/index.html?root=home" id="create" type="button" 
   data-bind="ojComponent: {component: 'ojButton', 
                            label: 'Login',
                            disabled: shouldDisableCreate()},
        click: onClick"></a>
</div>

JAVASCRIPT 代码

define(['ojs/ojcore', 'knockout', 'ojs/ojinputtext', 'ojs/ojbutton', 'ojs/ojknockout-validation', 'ojs/ojmodel'
], function (oj, ko) {
    /**
     * The view model for the main content view template
     */
    function logintestContentViewModel() {
        var self = this;
        self.tracker = ko.observable();
        self.username = ko.observable("");
        self.password = ko.observable("");
        self.clickedButton = ko.observable();
        self.buttonClick = function(data, event)
        {
            var trackerObj = ko.utils.unwrapObservable(self.tracker);
            if (!this._showComponentValidationErrors(trackerObj))
            {
                return;
            }

        };
        self.routePage = function(data,event)
        {
            self.clickedButton(event.currentTarget.id);
            return true;  
        };
        self.onClick = function()
        {
            self.buttonClick();
            self.routePage();
        }
        self.shouldDisableCreate = function()
        {
          var trackerObj = ko.utils.unwrapObservable(self.tracker),
          hasInvalidComponents = trackerObj ? trackerObj["invalidShown"] : false;
          return  hasInvalidComponents;
        };
        self._showComponentValidationErrors = function (trackerObj)
        {
            trackerObj.showMessages();
            if (trackerObj.focusOnFirstInvalid())
            return false;
        };

    }
    return logintestContentViewModel;
});

Answer 1

如果您使用ojRouter，那么您可以简单地使用

oj.Router.go("路由名称");

如果您不使用 ojRouter，那么您可以使用位置对象。像这样的东西:

window.location.pathname='/homepage'

我建议使用 ojRouter 及其 canEnter() 方法来处理此类事情。

路由器食谱演示: http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=router&demo=simple

路由器 canEnter 方法的 JSDocs http://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.RouterState.html