小编Tom*_*eck的帖子

zurb foundation 4手机与桌面内容

我是Zurb基金会的忠实粉丝.他们刚刚发布了Zurb Foundation 4,它被重新设计为移动优先.考虑到移动设备,平板电脑和传统桌面体验,我对响应式设计还是比较陌生的.我试图围绕如何最好地管理这些不同设备的网站内容.使用Zurb Foundation 4,您可以隐藏或显示基于小型,中型或大型设备尺寸的内容.因此,在Zurb的方法中,您可以将所有内容放到设备上,让CSS根据设备决定显示哪些内容(这是响应式设计).

我的问题是为什么我们必须将所有内容丢弃到设备?这似乎是浪费服务器上的处理,浪费带宽,浏览器处理内容时的较慢体验,其中一些内容可能永远不会由于他们正在使用的设备而向用户显示.我错过了什么吗?回到服务器并让它将内容发送到适合设备类型的客户端不是更好吗?我们不应该关注移动用户的数据计划,而不是发送不适合其设备类型的内容吗?我在响应式设计上看到的所有示例都有桌面和移动/平板电脑下载到客户端的内容,这似乎是一种浪费.

我正在开发一个基于设备类型具有不同用户体验的时间输入应用程序.桌面(全屏时)具有更详细的数据输入体验,而移动/平板电脑由于设备空间较小而具有不同的体验.我正在开发应用程序,所以当桌面浏览器调整为小于768px宽的东西时,jQuery会调用服务器来替换"较小"的移动/平板电脑版本的UI.这个合适吗?我当然不想下载2个版本的应用程序,并根据设备宽度隐藏其中一个版本.

我使用jQuery方法走在正确的轨道上吗?我是否遗漏了有关响应式设计并需要为设备定制内容的内容?任何想法,建议和指导表示赞赏.谢谢.

responsive-design zurb-foundation

4
推荐指数
1
解决办法
4997
查看次数

如何在 Angular 5 Universal 应用程序中排除浏览器模块

我正在尝试创建一个 Angular Universal 应用程序,在构建时构建特定路由,将 AppShell 注入 Index.html 页面,作为尽快在用户面前获取有意义内容的一种方式(当 Angular 应用程序正在下载时)。我正在按照Angular 大学的说明进行操作,并按照说明进行操作。但是,当我系统地将现有应用程序的功能添加到此测试应用程序中时,我遇到了“意外令牌导入”错误,该错误源于浏览器应用程序所需的第 3 方插件,但对于非常简单的服务器应用程序我不需要我正在尝试构建并注入 Index.html 作为我的 App Shell。

我花了几个小时研究这个,发现有很多帖子推荐 webpack,但是,我使用的是 Angular CLI。我不确定如何将 webpack 与 Angular CLI 构建过程结合起来。

我发现这篇文章似乎表明您可以使用 tsconfig.server.json 的排除部分从 Angular Universal 构建中排除模块。我已经尝试在 tsconfig.server.json 中列出要排除的模块,但是,我仍然收到“意外的令牌导入”错误。

我有一条路线需要构建并注入到我的索引页面中。我希望/认为我应该能够排除我的绝大多数应用程序,因为它与创建 AppShell 无关。我认为 Angular 应该简单地构建为服务器应用程序注册的路由所需的必要位。

我使用的是 Angular CLI 版本 1.7.3 和 Angular 版本 5.2.4。

有没有人知道如何从构建到 Angular Universal 应用程序中排除不必要的模块?

谢谢你的时间。

angular-cli angular-universal angular angular5

4
推荐指数
1
解决办法
3006
查看次数

导航到不同的html页面时,jQueryMobile页面事件不会触发

我正在尝试使用导航到不同的.html页面

$.mobile.changePage( "PlayGame.html", { transition: "slideup"}, true, true)
Run Code Online (Sandbox Code Playgroud)

PlayGame.html正在转换为,但是,以下都没有触发:

$(document).bind("mobileinit", function()
{
alert(1);
});

$('#gamePage').live('pageinit',function(event, ui)
{
    alert('pageinit');  
});

$('#gamePage').live('pagebeforeshow',function(event, ui)
{
    alert('booooo');
});
Run Code Online (Sandbox Code Playgroud)

但是,如果我这样做,window.location.href = "PlayGame.html"那么一切都会相应地发射.

我错过了什么?

谢谢

汤姆

jquery-mobile

3
推荐指数
1
解决办法
9102
查看次数

asp.net mvc 4显示模式和控制器

我一直在玩ASP.net MVC 4的新显示模式功能,你可以将.Mobile附加到显示页面(Index.Mobile.cshtml),它将为移动设备呈现移动版本.是否可以为不同的用户代理提供不同的控制器?像HomeController.Mobile.cs之类的东西?我试过这个,但它不起作用.编译器希望HomeController.cs和HomeController.Mobile.cs是局部的.

我知道我可以创建一个移动区域并将所有移动流量重定向到该区域,因此移动设备将拥有自己的控制器.但是,我更喜欢像HomeController.Mobile.cs这样的东西,因此它可以提供更清晰的代码库.否则,使用ASP.net 4的显示模式,移动版本和页面的Web版本将具有相同的控制器逻辑,并不总是需要.有关如何做到这一点的任何想法?

asp.net-mvc-4

3
推荐指数
1
解决办法
3571
查看次数

hiddenFor helper是从action参数中提取id,而不是viewModel

我偶然发现ASP.Net MVC的一个非常奇怪的情况,传递一个"id"作为动作参数和一个"id"隐藏的表单元素.我有一个具有"id"参数的动作.此id值表示项目.我有一个控制器操作,我正在创建一个数据输入表单,用于将员工分配给传入的项目(我创建一个下拉列表,管理员选择要分配给传递项目的员工).通过将员工分配给项目,我创建了一个ProjectEmployee记录(项目ID,员工ID和表示组合的ID,该组合是数据库中的标识列).标识列(名为"id")也是隐藏的表单元素.这是必要的,因为我需要能够在以后编辑项目/员工分配.

无论如何,在为项目创建新的员工分配时,项目ID(传递给操作的"id")将应用于"id"隐藏的表单元素.

我正在通过117行动.117是projectId.它被设置为"id"隐藏字段,该字段应该为0,因为0表示新项目/员工的分配.

查看模型

id  - unique id that represents the Project/Employee combination
projectId - the "Id" being passed to action
EmployeeId - what the admin is selecting from drop down
rate
startdate
endDate
...
Run Code Online (Sandbox Code Playgroud)

数据输入表格

@Html.HiddenFor(m => m.Id) 
@Html.HiddenFor(m => m.ProjectId)
...
Id: @Model.Id <br />
ProjectId: @Model.ProjectId<br />
Run Code Online (Sandbox Code Playgroud)

因此,@ Html.HiddenFor(m => m.Id)呈现隐藏的表单元素,其值为117. @ Model.Id将0呈现给UI.单步执行代码我可以在视觉上看到Id属性的值为0.为什么HiddenFor会将它的线交叉并拉出117的值?

这个bug已经进入了生产阶段,所以我手上的数据搞得一团糟,因为我没有在数据库表中创建新记录,而是实际更新了现有记录,因为"Id"属性被错误地设置了从0(表示新记录)到117(这是projectId),因此我正在更新不同的记录.

html-helper asp.net-mvc-3 html.hiddenfor

3
推荐指数
1
解决办法
1437
查看次数

Nrwl Nx 构建节点项目仅转译 main.ts

我是 Nrwl 和 monorepos 的新手。我有一个节点应用程序,我正在尝试使用nx build [project-name]. 我的节点应用程序在 main.ts 所在的 src 文件夹下的文件夹结构中有一些打字稿文件。当我运行时nx build [project-name],只有 main.ts 文件被转换为 out 目录中的 .js 文件。今天我一直在尝试不同的 tsconfig 变体来将整个应用程序转换到 out 目录中,但没有成功。我不得不求助于使用tsc --project ./apps/[project-name]/tsconfig.app.json来转译整个应用程序。是否有可能让 NX 转译整个节点项目?

这是我的项目的 tsconfig:

//tsconfig.app.json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist",
    "types": [
      "node"
    ]
  },
  "exclude": [
    "**/*.spec.ts"
  ],
  "include": [
    "**/*.ts"
  ]
}

//tsconfig.base.json
{
  "compileOnSave": false,
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true, …
Run Code Online (Sandbox Code Playgroud)

node.js typescript monorepo nrwl nrwl-nx

3
推荐指数
1
解决办法
2653
查看次数

当孩子具有相同的路径时,Angular 4 LazyLoad子路由会失败

我有一个应用程序,显示一个联系人列表,能够选择单个联系人并查看其详细信息.联系人详细信息页面有几个选项卡,用于显示联系人的子信息(个人资料,接触点和联系信息).以下是相关网址:

要查看联系人列表:

查看给定联系人的所有接触点

以下是构建联系人列表路由的路由数据以及联系人详细信息的延迟加载路由:

    export const routing: ModuleWithProviders = RouterModule.forChild(
    [
        {
            path: 'list',
            component: PageContactListComponent
        },
        //... other routes here...
        {
            path: ':id',
            component: PageContactDetailComponent,
            children:
            [
                //... other routes here...
                //LAZY LOADED:
                { path: 'touch-points',     loadChildren: './detail/components/touch-points/touch-points.module#TouchPointModule' }             ]
        }
    ]);
Run Code Online (Sandbox Code Playgroud)

这是触点模块的路由数据.

    export const routing:ModuleWithProviders = RouterModule.forChild(
    [   
        {
            path: '',
            pathMatch: 'full',
            redirectTo: 'list'
        },
        {
            path: 'list',
            component: TouchPointListComponent
        }
    ]);
Run Code Online (Sandbox Code Playgroud)

当我导航到时http://localhost:4200/contact/list,Angular尝试加载与之关联的组件http://localhost:4200/contact/84/touch-points/list.它似乎这样做是因为'list'也在延迟加载的模块中定义.如果我在触摸点模块的路由数据中将"list"更改为"history",则http://localhost:4200/contact/list加载相应的组件.

Angular 4路由器应该能够区分这些路由:( …

angular-routing angular angular-router

0
推荐指数
1
解决办法
296
查看次数